Skip to content

Commit 698928b

Browse files
sokrasokra
committed
added move to parents example
1 parent 779dbd4 commit 698928b

10 files changed

Lines changed: 320 additions & 3 deletions

File tree

‎examples/build-common.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@ var path = require("path");
1111

1212
var extraArgs = "";
1313

14-
var targetArgs = global.NO_TARGET_ARGS?"":" ./example.js js/output.js"
15-
cp.exec("node ../../bin/webpack.js --display-reasons --display-chunks --display-modules --display-origins --output-public-path \"js/\" -p "+extraArgs+targetArgs, function (error, stdout, stderr) {
14+
var targetArgs = global.NO_TARGET_ARGS?"":" ./example.js js/output.js";
15+
var displayReasons = global.NO_REASONS?"":" --display-reasons";
16+
cp.exec("node ../../bin/webpack.js"+displayReasons+" --display-chunks --display-modules --display-origins --output-public-path \"js/\" -p "+extraArgs+targetArgs, function (error, stdout, stderr) {
1617
if(stderr)
1718
console.log(stderr);
1819
if (error !== null)
1920
console.log(error);
2021
var readme = tc(fs.readFileSync(require("path").join(process.cwd(), "template.md"), "utf-8"), process.cwd(), stdout.replace(/[\r\n]*$/, ""), "min");
21-
cp.exec("node ../../bin/webpack.js --display-reasons --display-chunks --display-modules --display-origins --output-public-path \"js/\" --optimize-occurence-order --output-pathinfo "+extraArgs+targetArgs, function (error, stdout, stderr) {
22+
cp.exec("node ../../bin/webpack.js"+displayReasons+" --display-chunks --display-modules --display-origins --output-public-path \"js/\" --optimize-occurence-order --output-pathinfo "+extraArgs+targetArgs, function (error, stdout, stderr) {
2223
console.log(stdout);
2324
if(stderr)
2425
console.log(stderr);

‎examples/move-to-parent/README.md‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
This example shows example of using the CommonsChunkPlugin for moving modules from child-chunks to the parent chunk.
2+
3+
The `CommonsChunkPlugin` is used with `selectedChunks = false` argument to check for common modules in the child-chunks.
4+
5+
Without the plugin the pages would have this chunks:
6+
7+
* page
8+
* chunk: a
9+
* chunk: a, b
10+
* chunk: a, b, c
11+
* chunk: a, b, c, d
12+
13+
Using the `CommonsChunkPlugin` without `minChunks` argument only moves modules which are shared by all children (here only module `a`):
14+
15+
* pageA: a
16+
* chunk: b
17+
* chunk: b, c
18+
* chunk: b, c, d
19+
20+
With `minChunks = 3`:
21+
22+
* pageB: a, b
23+
* chunk: c
24+
* chunk: c, d
25+
26+
It's also possible to provide a function instead of a number for `minChunks`. The function is called for each module to decide if the module should be moved or not (see pageC and pageD).
27+
28+
# page.js
29+
30+
``` javascript
31+
require(["./a"]);
32+
require(["./a", "./b"]);
33+
require(["./a", "./b", "./c"]);
34+
require(["./a", "./b", "./c", "./d"]);
35+
```
36+
37+
# webpack.config.js
38+
39+
``` javascript
40+
var path = require("path");
41+
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
42+
module.exports = {
43+
entry: {
44+
pageA: "./page?A",
45+
pageB: "./page?B",
46+
pageC: "./page?C",
47+
pageD: "./page?D"
48+
},
49+
output: {
50+
path: path.join(__dirname, "js"),
51+
filename: "[name].bundle.js",
52+
chunkFilename: "[id].chunk.js"
53+
},
54+
plugins: [
55+
// check for common modules in children of pageA and move them to the parent
56+
new CommonsChunkPlugin("pageA", null, false),
57+
58+
// the same for pageB but move them if at least 3 children share the module
59+
new CommonsChunkPlugin("pageB", null, false, 3),
60+
61+
// the same for pageC and pageD but with a custom logic for moving
62+
new CommonsChunkPlugin(["pageC", "pageD"], null, false, function(module, count) {
63+
// move only module "b"
64+
return /b\.js$/.test(module.identifier());
65+
})
66+
]
67+
}
68+
```
69+
70+
# Info
71+
72+
## Uncompressed
73+
74+
```
75+
Hash: ff24adedc278bb766334
76+
Version: webpack 1.4.13
77+
Time: 100ms
78+
Asset Size Chunks Chunk Names
79+
pageD.bundle.js 4654 6, 11 [emitted] pageD
80+
0.chunk.js 186 0 [emitted]
81+
2.chunk.js 356 2, 0, 10 [emitted]
82+
3.chunk.js 517 3, 5, 8, 10, 11 [emitted]
83+
pageB.bundle.js 4668 4, 0, 11 [emitted] pageB
84+
5.chunk.js 363 5, 10 [emitted]
85+
1.chunk.js 516 1, 0, 2, 5, 10 [emitted]
86+
pageC.bundle.js 4609 7, 11 [emitted] pageC
87+
8.chunk.js 357 8, 10, 11 [emitted]
88+
pageA.bundle.js 4540 9, 0 [emitted] pageA
89+
10.chunk.js 181 10 [emitted]
90+
11.chunk.js 181 11 [emitted]
91+
chunk {0} 0.chunk.js 21 {7} {6} [rendered]
92+
> [0] ./page.js?C 1:0-16
93+
> duplicate [0] ./page.js?C 2:0-23
94+
> duplicate [0] ./page.js?D 1:0-16
95+
> duplicate [0] ./page.js?D 2:0-23
96+
[1] ./a.js 21 {0} {1} {2} {4} {9} [built]
97+
chunk {1} 1.chunk.js 63 {7} {6} [rendered]
98+
> [0] ./page.js?C 4:0-37
99+
> duplicate [0] ./page.js?D 4:0-37
100+
[1] ./a.js 21 {0} {1} {2} {4} {9} [built]
101+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
102+
[4] ./d.js 21 {1} {3} {5} [built]
103+
chunk {2} 2.chunk.js 42 {7} {6} [rendered]
104+
> [0] ./page.js?C 3:0-30
105+
> duplicate [0] ./page.js?D 3:0-30
106+
[1] ./a.js 21 {0} {1} {2} {4} {9} [built]
107+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
108+
chunk {3} 3.chunk.js 63 {9} [rendered]
109+
> [0] ./page.js?A 4:0-37
110+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
111+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
112+
[4] ./d.js 21 {1} {3} {5} [built]
113+
chunk {4} pageB.bundle.js (pageB) 160 [rendered]
114+
> pageB [0] ./page.js?B
115+
[0] ./page.js?B 118 {4} [built]
116+
[1] ./a.js 21 {0} {1} {2} {4} {9} [built]
117+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
118+
chunk {5} 5.chunk.js 42 {4} [rendered]
119+
> [0] ./page.js?B 4:0-37
120+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
121+
[4] ./d.js 21 {1} {3} {5} [built]
122+
chunk {6} pageD.bundle.js (pageD) 139 [rendered]
123+
> pageD [0] ./page.js?D
124+
[0] ./page.js?D 118 {6} [built]
125+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
126+
chunk {7} pageC.bundle.js (pageC) 139 [rendered]
127+
> pageC [0] ./page.js?C
128+
[0] ./page.js?C 118 {7} [built]
129+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
130+
chunk {8} 8.chunk.js 42 {9} [rendered]
131+
> [0] ./page.js?A 3:0-30
132+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
133+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
134+
chunk {9} pageA.bundle.js (pageA) 139 [rendered]
135+
> pageA [0] ./page.js?A
136+
[0] ./page.js?A 118 {9} [built]
137+
[1] ./a.js 21 {0} {1} {2} {4} {9} [built]
138+
chunk {10} 10.chunk.js 21 {4} [rendered]
139+
> [0] ./page.js?B 3:0-30
140+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
141+
chunk {11} 11.chunk.js 21 {9} [rendered]
142+
> [0] ./page.js?A 2:0-23
143+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
144+
```
145+
146+
## Minimized (uglify-js, no zip)
147+
148+
```
149+
Hash: 90a2707d1d39b4dcbc79
150+
Version: webpack 1.4.13
151+
Time: 370ms
152+
Asset Size Chunks Chunk Names
153+
pageD.bundle.js 885 6, 11 [emitted] pageD
154+
0.chunk.js 48 0 [emitted]
155+
2.chunk.js 81 2, 0, 10 [emitted]
156+
3.chunk.js 113 3, 5, 8, 10, 11 [emitted]
157+
pageB.bundle.js 857 4, 0, 11 [emitted] pageB
158+
5.chunk.js 80 5, 10 [emitted]
159+
1.chunk.js 112 1, 0, 2, 5, 10 [emitted]
160+
pageC.bundle.js 885 7, 11 [emitted] pageC
161+
8.chunk.js 82 8, 10, 11 [emitted]
162+
pageA.bundle.js 857 9, 0 [emitted] pageA
163+
10.chunk.js 50 10 [emitted]
164+
11.chunk.js 50 11 [emitted]
165+
chunk {0} 0.chunk.js 21 {7} {6} [rendered]
166+
> [0] ./page.js?C 1:0-16
167+
> duplicate [0] ./page.js?C 2:0-23
168+
> duplicate [0] ./page.js?D 1:0-16
169+
> duplicate [0] ./page.js?D 2:0-23
170+
[1] ./a.js 21 {0} {1} {2} {4} {9} [built]
171+
chunk {1} 1.chunk.js 63 {7} {6} [rendered]
172+
> [0] ./page.js?C 4:0-37
173+
> duplicate [0] ./page.js?D 4:0-37
174+
[1] ./a.js 21 {0} {1} {2} {4} {9} [built]
175+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
176+
[4] ./d.js 21 {1} {3} {5} [built]
177+
chunk {2} 2.chunk.js 42 {7} {6} [rendered]
178+
> [0] ./page.js?C 3:0-30
179+
> duplicate [0] ./page.js?D 3:0-30
180+
[1] ./a.js 21 {0} {1} {2} {4} {9} [built]
181+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
182+
chunk {3} 3.chunk.js 63 {9} [rendered]
183+
> [0] ./page.js?A 4:0-37
184+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
185+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
186+
[4] ./d.js 21 {1} {3} {5} [built]
187+
chunk {4} pageB.bundle.js (pageB) 160 [rendered]
188+
> pageB [0] ./page.js?B
189+
[0] ./page.js?B 118 {4} [built]
190+
[1] ./a.js 21 {0} {1} {2} {4} {9} [built]
191+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
192+
chunk {5} 5.chunk.js 42 {4} [rendered]
193+
> [0] ./page.js?B 4:0-37
194+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
195+
[4] ./d.js 21 {1} {3} {5} [built]
196+
chunk {6} pageD.bundle.js (pageD) 139 [rendered]
197+
> pageD [0] ./page.js?D
198+
[0] ./page.js?D 118 {6} [built]
199+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
200+
chunk {7} pageC.bundle.js (pageC) 139 [rendered]
201+
> pageC [0] ./page.js?C
202+
[0] ./page.js?C 118 {7} [built]
203+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
204+
chunk {8} 8.chunk.js 42 {9} [rendered]
205+
> [0] ./page.js?A 3:0-30
206+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
207+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
208+
chunk {9} pageA.bundle.js (pageA) 139 [rendered]
209+
> pageA [0] ./page.js?A
210+
[0] ./page.js?A 118 {9} [built]
211+
[1] ./a.js 21 {0} {1} {2} {4} {9} [built]
212+
chunk {10} 10.chunk.js 21 {4} [rendered]
213+
> [0] ./page.js?B 3:0-30
214+
[3] ./c.js 21 {1} {2} {3} {5} {8} {10} [built]
215+
chunk {11} 11.chunk.js 21 {9} [rendered]
216+
> [0] ./page.js?A 2:0-23
217+
[2] ./b.js 21 {3} {4} {6} {7} {8} {11} [built]
218+
219+
WARNING in pageB.bundle.js from UglifyJs
220+
Dropping side-effect-free statement [./page.js?B:1,0]
221+
Dropping side-effect-free statement [./page.js?B:2,0]
222+
223+
WARNING in pageA.bundle.js from UglifyJs
224+
Dropping side-effect-free statement [./page.js?A:1,0]
225+
```

‎examples/move-to-parent/a.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = "a";

‎examples/move-to-parent/b.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = "b";

‎examples/move-to-parent/build.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
global.NO_TARGET_ARGS = true;
2+
global.NO_REASONS = true;
3+
require("../build-common");

‎examples/move-to-parent/c.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = "c";

‎examples/move-to-parent/d.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = "d";

‎examples/move-to-parent/page.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
require(["./a"]);
2+
require(["./a", "./b"]);
3+
require(["./a", "./b", "./c"]);
4+
require(["./a", "./b", "./c", "./d"]);

‎examples/move-to-parent/template.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
This example shows example of using the CommonsChunkPlugin for moving modules from child-chunks to the parent chunk.
2+
3+
The `CommonsChunkPlugin` is used with `selectedChunks = false` argument to check for common modules in the child-chunks.
4+
5+
Without the plugin the pages would have this chunks:
6+
7+
* page
8+
* chunk: a
9+
* chunk: a, b
10+
* chunk: a, b, c
11+
* chunk: a, b, c, d
12+
13+
Using the `CommonsChunkPlugin` without `minChunks` argument only moves modules which are shared by all children (here only module `a`):
14+
15+
* pageA: a
16+
* chunk: b
17+
* chunk: b, c
18+
* chunk: b, c, d
19+
20+
With `minChunks = 3`:
21+
22+
* pageB: a, b
23+
* chunk: c
24+
* chunk: c, d
25+
26+
It's also possible to provide a function instead of a number for `minChunks`. The function is called for each module to decide if the module should be moved or not (see pageC and pageD).
27+
28+
# page.js
29+
30+
``` javascript
31+
{{page.js}}
32+
```
33+
34+
# webpack.config.js
35+
36+
``` javascript
37+
{{webpack.config.js}}
38+
```
39+
40+
# Info
41+
42+
## Uncompressed
43+
44+
```
45+
{{stdout}}
46+
```
47+
48+
## Minimized (uglify-js, no zip)
49+
50+
```
51+
{{min:stdout}}
52+
```

‎examples/move-to-parent/webpack.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var path = require("path");
2+
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
3+
module.exports = {
4+
entry: {
5+
pageA: "./page?A",
6+
pageB: "./page?B",
7+
pageC: "./page?C",
8+
pageD: "./page?D"
9+
},
10+
output: {
11+
path: path.join(__dirname, "js"),
12+
filename: "[name].bundle.js",
13+
chunkFilename: "[id].chunk.js"
14+
},
15+
plugins: [
16+
// check for common modules in children of pageA and move them to the parent
17+
new CommonsChunkPlugin("pageA", null, false),
18+
19+
// the same for pageB but move them if at least 3 children share the module
20+
new CommonsChunkPlugin("pageB", null, false, 3),
21+
22+
// the same for pageC and pageD but with a custom logic for moving
23+
new CommonsChunkPlugin(["pageC", "pageD"], null, false, function(module, count) {
24+
// move only module "b"
25+
return /b\.js$/.test(module.identifier());
26+
})
27+
]
28+
}

0 commit comments

Comments
 (0)