@@ -28,7 +28,7 @@ module.exports = {
28
28
// new webpack.optimize.CommonsChunkPlugin({
29
29
// // 在不使用CommonsChunkPlugin插件时,会生成四个entry chunk文件,pageA.js、pageB.js、pageC.js和vendor.js,这四个文件中都包含webpack runtime和polyfill,
30
30
// // 所以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
32
32
// name: "init"
33
33
// })
34
34
// ]
@@ -86,12 +86,23 @@ module.exports = {
86
86
// //顺序很重要
87
87
// //common.js用于至少被2个entry都使用的公共模块,即common.js = utility2.js + utility3.js
88
88
// //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缓存失效
89
90
// names: ["common", "vendor"],
90
91
// minChunks: 2
91
92
// })
92
93
// ]
93
94
94
95
//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放到第一个插件中
95
106
plugins : [
96
107
//vendor不经常变化,为了使用缓存,通过指定chunks把它单独弄出来,init包含webpack runtime和其他公共模块
97
108
new webpack . optimize . CommonsChunkPlugin ( {
0 commit comments