root
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #4219 from webpack/test/move-to-parent 

updated move to parent example and add test case
This commit is contained in:
Tobias Koppers 2017-02-07 09:44:39 +01:00 committed by GitHub
parent 4fff1f5c4b c49bfdf921
commit 1b7ae17ad1
11 changed files with 291 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

352
examples/move-to-parent/README.md
View File

@ -23,7 +23,10 @@ With `minChunks = 3`:
* chunk: c
* chunk: c, d
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).
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):
* pageC: a, c, d
* chunk: b
# page.js
@ -39,43 +42,62 @@ require(["./a", "./b", "./c", "./d"]);
``` javascript
var path = require("path");
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
module.exports = {
var outputOptions = {
path: path.join(__dirname, "js"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
};
module.exports = [{
name: "page",
entry: {
pageA: "./page?A",
pageB: "./page?B",
pageC: "./page?C",
pageD: "./page?D"
page: "./page"
},
output: {
path: path.join(__dirname, "js"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
output: outputOptions
}, {
name: "pageA",
entry: {
pageA: "./page"
},
output: outputOptions,
plugins: [
// check for common modules in children of pageA and move them to the parent
//check for common modules in children of pageA and move them to the parent
new CommonsChunkPlugin({
name: "pageA",
children: true
}),
]
}, {
name: "pageB",
entry: {
pageB: "./page"
},
output: outputOptions,
plugins: [
// the same for pageB but move them if at least 3 children share the module
new CommonsChunkPlugin({
name: "pageB",
children: true,
minChunks: 3
}),
]
}, {
name: "pageC",
entry: {
pageC: "./page"
},
output: outputOptions,
plugins: [
// the same for pageC and pageD but with a custom logic for moving
new CommonsChunkPlugin({
names: ["pageC", "pageD"],
name: "pageC",
children: true,
minChunks: function(module, count) {
// move only module "b"
return /b\.js$/.test(module.identifier());
return !/b\.js/.test(module.identifier());
}
})
]
}
}];
```
# Info
@ -83,123 +105,193 @@ module.exports = {
## Uncompressed
```
Hash: cc02f492e44f68d8c237
Version: webpack 2.2.0-rc.2
Asset Size Chunks Chunk Names
0.chunk.js 779 bytes 0, 1, 2, 3 [emitted]
1.chunk.js 589 bytes 1, 2, 3 [emitted]
2.chunk.js 399 bytes 2, 3 [emitted]
3.chunk.js 209 bytes 3 [emitted]
pageD.bundle.js 6.44 kB 4 [emitted] pageD
pageC.bundle.js 6.44 kB 5 [emitted] pageC
pageB.bundle.js 6.44 kB 6 [emitted] pageB
pageA.bundle.js 6.38 kB 7 [emitted] pageA
Entrypoint pageA = pageA.bundle.js
Entrypoint pageB = pageB.bundle.js
Entrypoint pageC = pageC.bundle.js
Entrypoint pageD = pageD.bundle.js
chunk {0} 0.chunk.js 84 bytes {4} {5} {6} {7} [rendered]
> duplicate [4] ./page.js?A 4:0-37
> duplicate [5] ./page.js?B 4:0-37
> duplicate [6] ./page.js?C 4:0-37
> duplicate [7] ./page.js?D 4:0-37
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
[3] ./d.js 21 bytes {0} [built]
chunk {1} 1.chunk.js 63 bytes {4} {5} {6} {7} [rendered]
> duplicate [4] ./page.js?A 3:0-30
> duplicate [5] ./page.js?B 3:0-30
> duplicate [6] ./page.js?C 3:0-30
> duplicate [7] ./page.js?D 3:0-30
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
chunk {2} 2.chunk.js 42 bytes {4} {5} {6} {7} [rendered]
> duplicate [4] ./page.js?A 2:0-23
> duplicate [5] ./page.js?B 2:0-23
> duplicate [6] ./page.js?C 2:0-23
> duplicate [7] ./page.js?D 2:0-23
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
chunk {3} 3.chunk.js 21 bytes {4} {5} {6} {7} [rendered]
> duplicate [4] ./page.js?A 1:0-16
> duplicate [5] ./page.js?B 1:0-16
> duplicate [6] ./page.js?C 1:0-16
> duplicate [7] ./page.js?D 1:0-16
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
chunk {4} pageD.bundle.js (pageD) 118 bytes [entry] [rendered]
> pageD [7] ./page.js?D
[7] ./page.js?D 118 bytes {4} [built]
chunk {5} pageC.bundle.js (pageC) 118 bytes [entry] [rendered]
> pageC [6] ./page.js?C
[6] ./page.js?C 118 bytes {5} [built]
chunk {6} pageB.bundle.js (pageB) 118 bytes [entry] [rendered]
> pageB [5] ./page.js?B
[5] ./page.js?B 118 bytes {6} [built]
chunk {7} pageA.bundle.js (pageA) 118 bytes [entry] [rendered]
> pageA [4] ./page.js?A
[4] ./page.js?A 118 bytes {7} [built]
Hash: 92649f18837fbb021129ea807ff9294488030e7d297a4b5e23527060dcf866a6fc0a7d0ef06171d3
Version: webpack 2.2.1
Child page:
Hash: 92649f18837fbb021129
Asset Size Chunks Chunk Names
0.chunk.js 787 bytes 0, 1, 2, 3 [emitted]
1.chunk.js 595 bytes 1, 2, 3 [emitted]
2.chunk.js 403 bytes 2, 3 [emitted]
3.chunk.js 211 bytes 3 [emitted]
page.bundle.js 6.37 kB 4 [emitted] page
Entrypoint page = page.bundle.js
chunk {0} 0.chunk.js 84 bytes {4} [rendered]
> [4] ./page.js 4:0-37
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
[3] ./d.js 21 bytes {0} [built]
chunk {1} 1.chunk.js 63 bytes {4} [rendered]
> [4] ./page.js 3:0-30
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
chunk {2} 2.chunk.js 42 bytes {4} [rendered]
> [4] ./page.js 2:0-23
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
chunk {3} 3.chunk.js 21 bytes {4} [rendered]
> [4] ./page.js 1:0-16
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
chunk {4} page.bundle.js (page) 118 bytes [entry] [rendered]
> page [4] ./page.js
[4] ./page.js 118 bytes {4} [built]
Child pageA:
Hash: ea807ff9294488030e7d
Asset Size Chunks Chunk Names
0.chunk.js 604 bytes 0, 1, 2 [emitted]
1.chunk.js 412 bytes 1, 2 [emitted]
2.chunk.js 220 bytes 2 [emitted]
pageA.bundle.js 6.57 kB 3 [emitted] pageA
Entrypoint pageA = pageA.bundle.js
chunk {0} 0.chunk.js 63 bytes {3} [rendered]
> [4] ./page.js 4:0-37
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
[3] ./d.js 21 bytes {0} [built]
chunk {1} 1.chunk.js 42 bytes {3} [rendered]
> [4] ./page.js 3:0-30
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
chunk {2} 2.chunk.js 21 bytes {3} [rendered]
> [4] ./page.js 2:0-23
[1] ./b.js 21 bytes {0} {1} {2} [built]
chunk {3} pageA.bundle.js (pageA) 139 bytes [entry] [rendered]
> pageA [4] ./page.js
[0] ./a.js 21 bytes {3} [built]
[4] ./page.js 118 bytes {3} [built]
Child pageB:
Hash: 297a4b5e23527060dcf8
Asset Size Chunks Chunk Names
0.chunk.js 421 bytes 0, 1 [emitted]
1.chunk.js 214 bytes 1 [emitted]
pageB.bundle.js 6.73 kB 2 [emitted] pageB
Entrypoint pageB = pageB.bundle.js
chunk {0} 0.chunk.js 42 bytes {2} [rendered]
> [4] ./page.js 4:0-37
[2] ./c.js 21 bytes {0} {1} [built]
[3] ./d.js 21 bytes {0} [built]
chunk {1} 1.chunk.js 21 bytes {2} [rendered]
> [4] ./page.js 3:0-30
[2] ./c.js 21 bytes {0} {1} [built]
chunk {2} pageB.bundle.js (pageB) 160 bytes [entry] [rendered]
> pageB [4] ./page.js
[0] ./a.js 21 bytes {2} [built]
[1] ./b.js 21 bytes {2} [built]
[4] ./page.js 118 bytes {2} [built]
Child pageC:
Hash: 66a6fc0a7d0ef06171d3
Asset Size Chunks Chunk Names
0.chunk.js 220 bytes 0 [emitted]
pageC.bundle.js 6.96 kB 1 [emitted] pageC
Entrypoint pageC = pageC.bundle.js
chunk {0} 0.chunk.js 21 bytes {1} [rendered]
> duplicate [4] ./page.js 2:0-23
> duplicate [4] ./page.js 3:0-30
> duplicate [4] ./page.js 4:0-37
[1] ./b.js 21 bytes {0} [built]
chunk {1} pageC.bundle.js (pageC) 181 bytes [entry] [rendered]
> pageC [4] ./page.js
[0] ./a.js 21 bytes {1} [built]
[2] ./c.js 21 bytes {1} [built]
[3] ./d.js 21 bytes {1} [built]
[4] ./page.js 118 bytes {1} [built]
```
## Minimized (uglify-js, no zip)
```
Hash: cc02f492e44f68d8c237
Version: webpack 2.2.0-rc.2
Asset Size Chunks Chunk Names
0.chunk.js 142 bytes 0, 1, 2, 3 [emitted]
1.chunk.js 111 bytes 1, 2, 3 [emitted]
2.chunk.js 80 bytes 2, 3 [emitted]
3.chunk.js 49 bytes 3 [emitted]
pageD.bundle.js 1.57 kB 4 [emitted] pageD
pageC.bundle.js 1.57 kB 5 [emitted] pageC
pageB.bundle.js 1.57 kB 6 [emitted] pageB
pageA.bundle.js 1.57 kB 7 [emitted] pageA
Entrypoint pageA = pageA.bundle.js
Entrypoint pageB = pageB.bundle.js
Entrypoint pageC = pageC.bundle.js
Entrypoint pageD = pageD.bundle.js
chunk {0} 0.chunk.js 84 bytes {4} {5} {6} {7} [rendered]
> duplicate [4] ./page.js?A 4:0-37
> duplicate [5] ./page.js?B 4:0-37
> duplicate [6] ./page.js?C 4:0-37
> duplicate [7] ./page.js?D 4:0-37
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
[3] ./d.js 21 bytes {0} [built]
chunk {1} 1.chunk.js 63 bytes {4} {5} {6} {7} [rendered]
> duplicate [4] ./page.js?A 3:0-30
> duplicate [5] ./page.js?B 3:0-30
> duplicate [6] ./page.js?C 3:0-30
> duplicate [7] ./page.js?D 3:0-30
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
chunk {2} 2.chunk.js 42 bytes {4} {5} {6} {7} [rendered]
> duplicate [4] ./page.js?A 2:0-23
> duplicate [5] ./page.js?B 2:0-23
> duplicate [6] ./page.js?C 2:0-23
> duplicate [7] ./page.js?D 2:0-23
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
chunk {3} 3.chunk.js 21 bytes {4} {5} {6} {7} [rendered]
> duplicate [4] ./page.js?A 1:0-16
> duplicate [5] ./page.js?B 1:0-16
> duplicate [6] ./page.js?C 1:0-16
> duplicate [7] ./page.js?D 1:0-16
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
chunk {4} pageD.bundle.js (pageD) 118 bytes [entry] [rendered]
> pageD [7] ./page.js?D
[7] ./page.js?D 118 bytes {4} [built]
chunk {5} pageC.bundle.js (pageC) 118 bytes [entry] [rendered]
> pageC [6] ./page.js?C
[6] ./page.js?C 118 bytes {5} [built]
chunk {6} pageB.bundle.js (pageB) 118 bytes [entry] [rendered]
> pageB [5] ./page.js?B
[5] ./page.js?B 118 bytes {6} [built]
chunk {7} pageA.bundle.js (pageA) 118 bytes [entry] [rendered]
> pageA [4] ./page.js?A
[4] ./page.js?A 118 bytes {7} [built]
Hash: 92649f18837fbb021129ea807ff9294488030e7d297a4b5e23527060dcf866a6fc0a7d0ef06171d3
Version: webpack 2.2.1
Child page:
Hash: 92649f18837fbb021129
Asset Size Chunks Chunk Names
0.chunk.js 142 bytes 0, 1, 2, 3 [emitted]
1.chunk.js 111 bytes 1, 2, 3 [emitted]
2.chunk.js 80 bytes 2, 3 [emitted]
3.chunk.js 49 bytes 3 [emitted]
page.bundle.js 1.57 kB 4 [emitted] page
Entrypoint page = page.bundle.js
chunk {0} 0.chunk.js 84 bytes {4} [rendered]
> [4] ./page.js 4:0-37
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
[3] ./d.js 21 bytes {0} [built]
chunk {1} 1.chunk.js 63 bytes {4} [rendered]
> [4] ./page.js 3:0-30
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
chunk {2} 2.chunk.js 42 bytes {4} [rendered]
> [4] ./page.js 2:0-23
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
[1] ./b.js 21 bytes {0} {1} {2} [built]
chunk {3} 3.chunk.js 21 bytes {4} [rendered]
> [4] ./page.js 1:0-16
[0] ./a.js 21 bytes {0} {1} {2} {3} [built]
chunk {4} page.bundle.js (page) 118 bytes [entry] [rendered]
> page [4] ./page.js
[4] ./page.js 118 bytes {4} [built]
Child pageA:
Hash: ea807ff9294488030e7d
Asset Size Chunks Chunk Names
0.chunk.js 112 bytes 0, 1, 2 [emitted]
1.chunk.js 81 bytes 1, 2 [emitted]
2.chunk.js 50 bytes 2 [emitted]
pageA.bundle.js 1.61 kB 3 [emitted] pageA
Entrypoint pageA = pageA.bundle.js
chunk {0} 0.chunk.js 63 bytes {3} [rendered]
> [4] ./page.js 4:0-37
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
[3] ./d.js 21 bytes {0} [built]
chunk {1} 1.chunk.js 42 bytes {3} [rendered]
> [4] ./page.js 3:0-30
[1] ./b.js 21 bytes {0} {1} {2} [built]
[2] ./c.js 21 bytes {0} {1} [built]
chunk {2} 2.chunk.js 21 bytes {3} [rendered]
> [4] ./page.js 2:0-23
[1] ./b.js 21 bytes {0} {1} {2} [built]
chunk {3} pageA.bundle.js (pageA) 139 bytes [entry] [rendered]
> pageA [4] ./page.js
[0] ./a.js 21 bytes {3} [built]
[4] ./page.js 118 bytes {3} [built]
Child pageB:
Hash: 297a4b5e23527060dcf8
Asset Size Chunks Chunk Names
0.chunk.js 82 bytes 0, 1 [emitted]
1.chunk.js 51 bytes 1 [emitted]
pageB.bundle.js 1.65 kB 2 [emitted] pageB
Entrypoint pageB = pageB.bundle.js
chunk {0} 0.chunk.js 42 bytes {2} [rendered]
> [4] ./page.js 4:0-37
[2] ./c.js 21 bytes {0} {1} [built]
[3] ./d.js 21 bytes {0} [built]
chunk {1} 1.chunk.js 21 bytes {2} [rendered]
> [4] ./page.js 3:0-30
[2] ./c.js 21 bytes {0} {1} [built]
chunk {2} pageB.bundle.js (pageB) 160 bytes [entry] [rendered]
> pageB [4] ./page.js
[0] ./a.js 21 bytes {2} [built]
[1] ./b.js 21 bytes {2} [built]
[4] ./page.js 118 bytes {2} [built]
Child pageC:
Hash: 66a6fc0a7d0ef06171d3
Asset Size Chunks Chunk Names
0.chunk.js 50 bytes 0 [emitted]
pageC.bundle.js 1.66 kB 1 [emitted] pageC
Entrypoint pageC = pageC.bundle.js
chunk {0} 0.chunk.js 21 bytes {1} [rendered]
> duplicate [4] ./page.js 2:0-23
> duplicate [4] ./page.js 3:0-30
> duplicate [4] ./page.js 4:0-37
[1] ./b.js 21 bytes {0} [built]
chunk {1} pageC.bundle.js (pageC) 181 bytes [entry] [rendered]
> pageC [4] ./page.js
[0] ./a.js 21 bytes {1} [built]
[2] ./c.js 21 bytes {1} [built]
[3] ./d.js 21 bytes {1} [built]
[4] ./page.js 118 bytes {1} [built]
```

4
examples/move-to-parent/page.js Normal file
View File

@ -0,0 +1,4 @@
require(["./a"]);
require(["./a", "./b"]);
require(["./a", "./b", "./c"]);
require(["./a", "./b", "./c", "./d"]);

1
examples/move-to-parent/pageA.js
View File

@ -1 +0,0 @@
require(["./a"]);

1
examples/move-to-parent/pageB.js
View File

@ -1 +0,0 @@
require(["./a", "./b"]);

2
examples/move-to-parent/pageC.js
View File

@ -1,2 +0,0 @@
require(["./a", "./b", "./c"]);

1
examples/move-to-parent/pageD.js
View File

@ -1 +0,0 @@
require(["./a", "./b", "./c", "./d"]);

5
examples/move-to-parent/template.md
View File

@ -23,7 +23,10 @@ With `minChunks = 3`:
* chunk: c
* chunk: c, d
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).
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):
* pageC: a, c, d
* chunk: b
# page.js

47
examples/move-to-parent/webpack.config.js
View File

@ -1,39 +1,58 @@
var path = require("path");
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
module.exports = {
var outputOptions = {
path: path.join(__dirname, "js"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
};
module.exports = [{
name: "page",
entry: {
pageA: "./pageA",
pageB: "./pageB",
pageC: "./pageC",
pageD: "./pageD"
page: "./page"
},
output: {
path: path.join(__dirname, "js"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
output: outputOptions
}, {
name: "pageA",
entry: {
pageA: "./page"
},
output: outputOptions,
plugins: [
//check for common modules in children of pageA and move them to the parent
new CommonsChunkPlugin({
name: "pageA",
children: true
}),
]
}, {
name: "pageB",
entry: {
pageB: "./page"
},
output: outputOptions,
plugins: [
// the same for pageB but move them if at least 3 children share the module
new CommonsChunkPlugin({
name: "pageB",
children: true,
minChunks: 3
}),
]
}, {
name: "pageC",
entry: {
pageC: "./page"
},
output: outputOptions,
plugins: [
// the same for pageC and pageD but with a custom logic for moving
new CommonsChunkPlugin({
names: ["pageC", "pageD"],
name: "pageC",
children: true,
minChunks: function(module, count) {
// move only module "b"
return !/b\.js$/.test(module.identifier());
return !/b\.js/.test(module.identifier());
}
})
]
};
}];

1
test/configCases/commons-chunk-plugin/move-to-parent/a.js Normal file
View File

@ -0,0 +1 @@
export default "a";

10
test/configCases/commons-chunk-plugin/move-to-parent/index.js Normal file
View File

@ -0,0 +1,10 @@
import "should";
it("should load a moved module", function(done) {
import("./a")
.then(a => {
a.default.should.be.eql("a");
done();
})
.catch(done);
});

17
test/configCases/commons-chunk-plugin/move-to-parent/webpack.config.js Normal file
View File

@ -0,0 +1,17 @@
var CommonsChunkPlugin = require("../../../../lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
bundle0: "./index"
},
target: "web",
output: {
filename: "[name].js"
},
plugins: [
new CommonsChunkPlugin({
name: "bundle0",
children: true,
minChunks: 1
})
]
};