Merge pull request webpack#7332 from webpack/example/split-chunks

sokra · web-flow · commit b8aa4db294d9 · 2018-05-17T21:32:42.000+02:00
add split chunks example
diff --git a/examples/many-pages/README.md b/examples/many-pages/README.md
@@ -0,0 +1,141 @@
+# Info
+
+This example illustrates webpack's algorthim for automatic deduplication using `optimization.splitChunks`.
+
+This example application contains 7 pages, each of them importing 1-3 modules from the `node_modules` folder (vendor libs) and 0-3 modules from the `stuff` folder (application modules). In reallity an application is probably more complex, but the same mechanisms apply.
+
+The following configuration is used:
+
+* `optimization.splitChunks.chunks: "all"` - This opt-in into automatic splitting of initial chunks which is off by default
+* `optimization.splitChunks.maxInitial/AsyncRequests: 20` - This opt-in into a HTTP2 optimized splitting mode by increasing the allowed amount of requests. Browser only supports 6 requests in parallel for HTTP1.1.
+
+# Interpreting the result
+
+* `pageA.js` the normal output files for the entrypoint `pageA`
+* `vendors~pageD~pageE~pageF~pageG.js` vendor libs shared by these pages extracted into a separate output file when larger then the threshold in size
+* `vendors~pageA.js` vendors only used by a single page but larger than the threshold in size
+* `pageA~pageD~pageF.js` application modules shared by these pages and larger than the threshold in size
+
+The threshold is here 40 bytes, but by default (in a real application) 30kb.
+
+Some modules are intentially duplicated, i. e. `./stuff/s4.js` is shared by `pageA` and `pageC`, but it's the only shared module so no separate output file is created because it would be smaller than the threshold. A separate request (which comes with an overhead and worsen gzipping) is not worth the extra bytes.
+
+Note: decreasing `maxInitial/AsyncRequest` will increase duplication further to reduce the number of requests. Duplication doesn't affect initial page load, it only affects download size of navigations to other pages of the application.
+
+## webpack.config.js
+
+```
+module.exports = {
+	// mode: "development || "production",
+	entry: {
+		pageA: "./pages/a",
+		pageB: "./pages/b",
+		pageC: "./pages/c",
+		pageD: "./pages/d",
+		pageE: "./pages/e",
+		pageF: "./pages/f",
+		pageG: "./pages/g"
+	},
+	optimization: {
+		splitChunks: {
+			chunks: "all",
+			maxInitialRequests: 20, // for HTTP2
+			maxAsyncRequests: 20, // for HTTP2
+			minSize: 40 // for example only: choosen to match 2 modules
+			// omit minSize in real use case to use the default of 30kb
+		}
+	}
+};
+```
+
+## Production mode
+
+```
+Hash: 0a1b2c3d4e5f6a7b8c9d
+Version: webpack 4.8.3
+                             Asset       Size  Chunks             Chunk Names
+                          pageG.js   1.15 KiB       7  [emitted]  pageG
+vendors~pageD~pageE~pageF~pageG.js  119 bytes       0  [emitted]  vendors~pageD~pageE~pageF~pageG
+      vendors~pageD~pageE~pageF.js  178 bytes       2  [emitted]  vendors~pageD~pageE~pageF
+      vendors~pageA~pageB~pageC.js  180 bytes       3  [emitted]  vendors~pageA~pageB~pageC
+                  vendors~pageC.js  121 bytes       4  [emitted]  vendors~pageC
+                  vendors~pageB.js  121 bytes       5  [emitted]  vendors~pageB
+                  vendors~pageA.js  121 bytes       6  [emitted]  vendors~pageA
+              pageA~pageD~pageF.js  156 bytes       1  [emitted]  pageA~pageD~pageF
+                          pageF.js   1.18 KiB       8  [emitted]  pageF
+                          pageE.js   1.17 KiB       9  [emitted]  pageE
+                          pageD.js   1.18 KiB      10  [emitted]  pageD
+                          pageC.js   1.27 KiB      11  [emitted]  pageC
+                          pageB.js   1.27 KiB      12  [emitted]  pageB
+                          pageA.js   1.18 KiB      13  [emitted]  pageA
+Entrypoint pageA = vendors~pageA~pageB~pageC.js vendors~pageA.js pageA~pageD~pageF.js pageA.js
+Entrypoint pageB = vendors~pageA~pageB~pageC.js vendors~pageB.js pageB.js
+Entrypoint pageC = vendors~pageA~pageB~pageC.js vendors~pageC.js pageC.js
+Entrypoint pageD = vendors~pageD~pageE~pageF~pageG.js vendors~pageD~pageE~pageF.js pageA~pageD~pageF.js pageD.js
+Entrypoint pageE = vendors~pageD~pageE~pageF~pageG.js vendors~pageD~pageE~pageF.js pageE.js
+Entrypoint pageF = vendors~pageD~pageE~pageF~pageG.js vendors~pageD~pageE~pageF.js pageA~pageD~pageF.js pageF.js
+Entrypoint pageG = vendors~pageD~pageE~pageF~pageG.js pageG.js
+chunk    {0} vendors~pageD~pageE~pageF~pageG.js (vendors~pageD~pageE~pageF~pageG) 43 bytes ={1}= ={10}= ={2}= ={7}= ={8}= ={9}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~pageD~pageE~pageF~pageG)
+    > ./pages/d pageD
+    > ./pages/e pageE
+    > ./pages/f pageF
+    > ./pages/g pageG
+    1 module
+chunk    {1} pageA~pageD~pageF.js (pageA~pageD~pageF) 62 bytes ={0}= ={10}= ={13}= ={2}= ={3}= ={6}= ={8}= [initial] [rendered] split chunk (cache group: default) (name: pageA~pageD~pageF)
+    > ./pages/a pageA
+    > ./pages/d pageD
+    > ./pages/f pageF
+ [6] ./stuff/s3.js 31 bytes {1} [built]
+ [7] ./stuff/s2.js 31 bytes {1} [built]
+chunk    {2} vendors~pageD~pageE~pageF.js (vendors~pageD~pageE~pageF) 86 bytes ={0}= ={1}= ={10}= ={8}= ={9}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~pageD~pageE~pageF)
+    > ./pages/d pageD
+    > ./pages/e pageE
+    > ./pages/f pageF
+    2 modules
+chunk    {3} vendors~pageA~pageB~pageC.js (vendors~pageA~pageB~pageC) 86 bytes ={1}= ={11}= ={12}= ={13}= ={4}= ={5}= ={6}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~pageA~pageB~pageC)
+    > ./pages/a pageA
+    > ./pages/b pageB
+    > ./pages/c pageC
+    2 modules
+chunk    {4} vendors~pageC.js (vendors~pageC) 43 bytes ={11}= ={3}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~pageC)
+    > ./pages/c pageC
+    1 module
+chunk    {5} vendors~pageB.js (vendors~pageB) 43 bytes ={12}= ={3}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~pageB)
+    > ./pages/b pageB
+    1 module
+chunk    {6} vendors~pageA.js (vendors~pageA) 43 bytes ={1}= ={13}= ={3}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~pageA)
+    > ./pages/a pageA
+    1 module
+chunk    {7} pageG.js (pageG) 70 bytes ={0}= [entry] [rendered]
+    > ./pages/g pageG
+  [0] ./stuff/s1.js 31 bytes {7} {8} {10} {12} [built]
+ [10] ./pages/g.js 39 bytes {7} [built]
+chunk    {8} pageF.js (pageF) 144 bytes ={0}= ={1}= ={2}= [entry] [rendered]
+    > ./pages/f pageF
+  [0] ./stuff/s1.js 31 bytes {7} {8} {10} {12} [built]
+ [11] ./pages/f.js 113 bytes {8} [built]
+chunk    {9} pageE.js (pageE) 98 bytes ={0}= ={2}= [entry] [rendered]
+    > ./pages/e pageE
+  [4] ./stuff/s7.js 31 bytes {9} {12} [built]
+ [12] ./pages/e.js 67 bytes {9} [built]
+chunk   {10} pageD.js (pageD) 144 bytes ={0}= ={1}= ={2}= [entry] [rendered]
+    > ./pages/d pageD
+  [0] ./stuff/s1.js 31 bytes {7} {8} {10} {12} [built]
+ [13] ./pages/d.js 113 bytes {10} [built]
+chunk   {11} pageC.js (pageC) 206 bytes ={3}= ={4}= [entry] [rendered]
+    > ./pages/c pageC
+  [5] ./stuff/s4.js 31 bytes {11} {13} [built]
+ [14] ./stuff/s6.js 31 bytes {11} [built]
+ [15] ./stuff/s5.js 31 bytes {11} [built]
+ [17] ./pages/c.js 113 bytes {11} [built]
+chunk   {12} pageB.js (pageB) 206 bytes ={3}= ={5}= [entry] [rendered]
+    > ./pages/b pageB
+  [0] ./stuff/s1.js 31 bytes {7} {8} {10} {12} [built]
+  [4] ./stuff/s7.js 31 bytes {9} {12} [built]
+ [18] ./stuff/s8.js 31 bytes {12} [built]
+ [20] ./pages/b.js 113 bytes {12} [built]
+chunk   {13} pageA.js (pageA) 144 bytes ={1}= ={3}= ={6}= [entry] [rendered]
+    > ./pages/a pageA
+  [5] ./stuff/s4.js 31 bytes {11} {13} [built]
+ [22] ./pages/a.js 113 bytes {13} [built]
+```
diff --git a/examples/many-pages/build.js b/examples/many-pages/build.js
@@ -0,0 +1,3 @@
+global.NO_TARGET_ARGS = true;
+global.NO_REASONS = true;
+require("../build-common");
diff --git a/examples/many-pages/node_modules/m1.js b/examples/many-pages/node_modules/m1.js
diff --git a/examples/many-pages/node_modules/m2.js b/examples/many-pages/node_modules/m2.js
diff --git a/examples/many-pages/node_modules/m3.js b/examples/many-pages/node_modules/m3.js
diff --git a/examples/many-pages/node_modules/m4.js b/examples/many-pages/node_modules/m4.js
diff --git a/examples/many-pages/node_modules/m5.js b/examples/many-pages/node_modules/m5.js
diff --git a/examples/many-pages/node_modules/m6.js b/examples/many-pages/node_modules/m6.js
diff --git a/examples/many-pages/node_modules/m7.js b/examples/many-pages/node_modules/m7.js
diff --git a/examples/many-pages/node_modules/m8.js b/examples/many-pages/node_modules/m8.js
diff --git a/examples/many-pages/pages/a.js b/examples/many-pages/pages/a.js
@@ -0,0 +1,7 @@
+import "m1";
+import "m2";
+import "m3";
+
+import "../stuff/s2";
+import "../stuff/s3";
+import "../stuff/s4";
diff --git a/examples/many-pages/pages/b.js b/examples/many-pages/pages/b.js
@@ -0,0 +1,7 @@
+import "m1";
+import "m2";
+import "m4";
+
+import "../stuff/s1";
+import "../stuff/s7";
+import "../stuff/s8";
diff --git a/examples/many-pages/pages/c.js b/examples/many-pages/pages/c.js
@@ -0,0 +1,7 @@
+import "m1";
+import "m2";
+import "m5";
+
+import "../stuff/s4";
+import "../stuff/s5";
+import "../stuff/s6";
diff --git a/examples/many-pages/pages/d.js b/examples/many-pages/pages/d.js
@@ -0,0 +1,7 @@
+import "m6";
+import "m7";
+import "m8";
+
+import "../stuff/s1";
+import "../stuff/s2";
+import "../stuff/s3";
diff --git a/examples/many-pages/pages/e.js b/examples/many-pages/pages/e.js
@@ -0,0 +1,5 @@
+import "m6";
+import "m7";
+import "m8";
+
+import "../stuff/s7";
diff --git a/examples/many-pages/pages/f.js b/examples/many-pages/pages/f.js
@@ -0,0 +1,7 @@
+import "m6";
+import "m7";
+import "m8";
+
+import "../stuff/s1";
+import "../stuff/s2";
+import "../stuff/s3";
diff --git a/examples/many-pages/pages/g.js b/examples/many-pages/pages/g.js
@@ -0,0 +1,3 @@
+import "m6";
+
+import "../stuff/s1";
diff --git a/examples/many-pages/stuff/s1.js b/examples/many-pages/stuff/s1.js
@@ -0,0 +1 @@
+console.log("some own module");
diff --git a/examples/many-pages/stuff/s2.js b/examples/many-pages/stuff/s2.js
@@ -0,0 +1 @@
+console.log("some own module");
diff --git a/examples/many-pages/stuff/s3.js b/examples/many-pages/stuff/s3.js
@@ -0,0 +1 @@
+console.log("some own module");
diff --git a/examples/many-pages/stuff/s4.js b/examples/many-pages/stuff/s4.js
@@ -0,0 +1 @@
+console.log("some own module");
diff --git a/examples/many-pages/stuff/s5.js b/examples/many-pages/stuff/s5.js
@@ -0,0 +1 @@
+console.log("some own module");
diff --git a/examples/many-pages/stuff/s6.js b/examples/many-pages/stuff/s6.js
@@ -0,0 +1 @@
+console.log("some own module");
diff --git a/examples/many-pages/stuff/s7.js b/examples/many-pages/stuff/s7.js
@@ -0,0 +1 @@
+console.log("some own module");
diff --git a/examples/many-pages/stuff/s8.js b/examples/many-pages/stuff/s8.js
@@ -0,0 +1 @@
+console.log("some own module");
diff --git a/examples/many-pages/template.md b/examples/many-pages/template.md
@@ -0,0 +1,35 @@
+# Info
+
+This example illustrates webpack's algorthim for automatic deduplication using `optimization.splitChunks`.
+
+This example application contains 7 pages, each of them importing 1-3 modules from the `node_modules` folder (vendor libs) and 0-3 modules from the `stuff` folder (application modules). In reallity an application is probably more complex, but the same mechanisms apply.
+
+The following configuration is used:
+
+* `optimization.splitChunks.chunks: "all"` - This opt-in into automatic splitting of initial chunks which is off by default
+* `optimization.splitChunks.maxInitial/AsyncRequests: 20` - This opt-in into a HTTP2 optimized splitting mode by increasing the allowed amount of requests. Browser only supports 6 requests in parallel for HTTP1.1.
+
+# Interpreting the result
+
+* `pageA.js` the normal output files for the entrypoint `pageA`
+* `vendors~pageD~pageE~pageF~pageG.js` vendor libs shared by these pages extracted into a separate output file when larger then the threshold in size
+* `vendors~pageA.js` vendors only used by a single page but larger than the threshold in size
+* `pageA~pageD~pageF.js` application modules shared by these pages and larger than the threshold in size
+
+The threshold is here 40 bytes, but by default (in a real application) 30kb.
+
+Some modules are intentially duplicated, i. e. `./stuff/s4.js` is shared by `pageA` and `pageC`, but it's the only shared module so no separate output file is created because it would be smaller than the threshold. A separate request (which comes with an overhead and worsen gzipping) is not worth the extra bytes.
+
+Note: decreasing `maxInitial/AsyncRequest` will increase duplication further to reduce the number of requests. Duplication doesn't affect initial page load, it only affects download size of navigations to other pages of the application.
+
+## webpack.config.js
+
+```
+{{webpack.config.js}}
+```
+
+## Production mode
+
+```
+{{production:stdout}}
+```
diff --git a/examples/many-pages/webpack.config.js b/examples/many-pages/webpack.config.js
@@ -0,0 +1,21 @@
+module.exports = {
+	// mode: "development || "production",
+	entry: {
+		pageA: "./pages/a",
+		pageB: "./pages/b",
+		pageC: "./pages/c",
+		pageD: "./pages/d",
+		pageE: "./pages/e",
+		pageF: "./pages/f",
+		pageG: "./pages/g"
+	},
+	optimization: {
+		splitChunks: {
+			chunks: "all",
+			maxInitialRequests: 20, // for HTTP2
+			maxAsyncRequests: 20, // for HTTP2
+			minSize: 40 // for example only: choosen to match 2 modules
+			// omit minSize in real use case to use the default of 30kb
+		}
+	}
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+global.NO_TARGET_ARGS = true;`
	`2`	`+global.NO_REASONS = true;`
	`3`	`+require("../build-common");`