From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 15 Nov 2021 18:11:36 +0000 (+0100)
Subject: docs: document grouping chunks with Vite (#1178)
X-Git-Tag: v4.0.13~54
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=cb3c28101ca26e51be385529278d6d1099934895;p=thirdparty%2Fvuejs%2Frouter.git

docs: document grouping chunks with Vite (#1178)
---

diff --git a/docs/guide/advanced/lazy-loading.md b/docs/guide/advanced/lazy-loading.md
index 911528fc..843f01e0 100644
--- a/docs/guide/advanced/lazy-loading.md
+++ b/docs/guide/advanced/lazy-loading.md
@@ -42,6 +42,8 @@ When using Babel, you will need to add the [syntax-dynamic-import](https://babel
 
 ## Grouping Components in the Same Chunk
 
+### With webpack
+
 Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use [named chunks](https://webpack.js.org/guides/code-splitting/#dynamic-imports) by providing a chunk name using a special comment syntax (requires webpack > 2.4):
 
 ```js
@@ -54,3 +56,26 @@ const UserProfileEdit = () =>
 ```
 
 webpack will group any async module with the same chunk name into the same async chunk.
+
+### With Vite
+
+In Vite you can define the chunks under the [`rollupOptions`](https://vitejs.dev/config/#build-rollupoptions):
+
+```js
+// vite.config.js
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      // https://rollupjs.org/guide/en/#outputmanualchunks
+      output: {
+        manualChunks: {
+          'group-user': [
+            './src/UserDetails',
+            './src/UserDashboard',
+            './src/UserProfileEdit',
+          ],
+        },
+    },
+  },
+})
+```