Skip to content

Commit f00f869

Browse files
committed
update
1 parent 213b0d2 commit f00f869

File tree

2 files changed

+13
-2
lines changed

2 files changed

+13
-2
lines changed

tutorials/webpack-common-chunk/example1.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ module.exports = {
1616

1717
plugins: [
1818
new webpack.optimize.CommonsChunkPlugin({
19-
// init.js用于存储webpack runtime的代码以及被所有entry都是用的公共模块,本例中init.js = webpack runtime
19+
// init.js用于存储webpack runtime的代码以及被所有entry都使用的公共模块,本例中init.js = webpack runtime
2020
name: "init"
2121
})
2222
]

tutorials/webpack-common-chunk/webpack.config.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ module.exports = {
2828
// new webpack.optimize.CommonsChunkPlugin({
2929
// // 在不使用CommonsChunkPlugin插件时,会生成四个entry chunk文件,pageA.js、pageB.js、pageC.js和vendor.js,这四个文件中都包含webpack runtime和polyfill,
3030
// // 所以CommonsChunkPlugin插件会将这四个文件中的webpack runtime和polyfill提取出来,放到init.js中
31-
// // init.js用于存储webpack runtime的代码以及被所有entry都是用的公共模块,本例中init.js = webpack runtime + polyfill
31+
// // init.js用于存储webpack runtime的代码以及被所有entry都使用的公共模块,本例中init.js = webpack runtime + polyfill
3232
// name: "init"
3333
// })
3434
// ]
@@ -86,12 +86,23 @@ module.exports = {
8686
// //顺序很重要
8787
// //common.js用于至少被2个entry都使用的公共模块,即common.js = utility2.js + utility3.js
8888
// //vendor本身是一个entry,其包含vendor1和vendor2的代码,在此基础上vendor.js还会包含webpack runtime的代码,即vendor.js = webpack runtime + vendor1.js + vendor2.js
89+
// //vendor.js包含webpack runtime是一个很不好的体验,因为每次编译webpack runtime都可能变化,会使得vendor.js缓存失效
8990
// names: ["common", "vendor"],
9091
// minChunks: 2
9192
// })
9293
// ]
9394

9495
//http://stackoverflow.com/questions/35908253/webpack-how-to-bundle-entries-to-multiple-common-chunks-with-commonschunkplugin
96+
//https://doc.webpack-china.org/guides/code-splitting-libraries/
97+
//如果设置了多个CommonsChunkPlugin实例,那么处理流程是这样的:
98+
//1. 每个实例都设置了name,有可能设置了chunks属性,也有可能没有设置
99+
//2. 假设output.entry设置了三个entry: chunk1、chunk2、chunk3,那么在使用CommonsChunkPlugin插件之前就相当于我们有了三个chunk
100+
//3. 先使用第一个CommonsChunkPlugin插件处理这三个插件,如果这个插件设置了chunks: ['chunk1', 'chunk2'],
101+
//那么久从chunk1和chunk2中提取公共使用的模块(具体行为受到minChunks影响),提取到的公共模块放到该插件指定的name属性的chunk中,
102+
//如果name是chunk4,那么就创建一个新的chunk4存放该公共代码,如果name是chunk1、chunk2、chunk3中的某个chunk,那么就会把公共代码放到对应的chunk中
103+
//4. 经过第一个插件的处理,我们chunks数量可能发生了变化,基于这些chunks,进行第二次插件的同样处理。
104+
//5. 最终处理完成后,最后一个chunk包含webpack runtime
105+
//6. 一般讲vendor chunk放到第一个插件中
95106
plugins: [
96107
//vendor不经常变化,为了使用缓存,通过指定chunks把它单独弄出来,init包含webpack runtime和其他公共模块
97108
new webpack.optimize.CommonsChunkPlugin({

0 commit comments

Comments
 (0)