webpack CommonsChunkPlugin —— 把webpack打的包再拆分一下

天下大势,分久必合,合久必分

使用webpack的目的是为了打包让开发者可以忽略一个项目中不同类型的依赖资源之间的差异,更专注于业务功能的开发。

Image

通常的打包配置将除较大的图片文件、字体文件、音视频文件以及css内容之外的其他内容打包成一个js文件,生成的包越来越大

这会导致:

Image

Image

是时候考虑把生成的包拆分一下了!


CommonsChunkPlugion,专业拆包

CommonsChunkPlugin在打包完成之后对比生成的文件进行处理,根据配置将包进行拆分。

Image

这在webpack打包流程中属于可选操作,每使用一次该插件,会生成一个单独的文件(chunk,译作切片),这个文件中包含了在多个入口chunk中的公共模块,表面上看,“多个”至少包含2个,然而事实却未必

配置选项:

·       name。切片名称,字符串或字符串数组,可以是已经存在的chunk名称

·      filename。文件命名模板,可以使用[name]、[hash]、[id]之类的变量占位符。

·       minChunks。大于等于2的数字,表示至少该数量的chunk中公用的模块才会被提取出来单独打包。也可以是一个函数,接受两个参数,NormalModule类型的module和表示模块使用计数的count,返回为true的模块会被提取出来。默认为全部chunk数量。

·      chunks。需要检查、提取公用模块的chunk。

获得的好处:

1.     打包单独的公式模块。

1.    加载后不大变化。

2.     浏览器缓存。

3.    跨页面共用。


示例一:

module.exports = {
 
entry: {
   
app: './app.js',
   
vendor: ['react', 'react-dom', 'moment' /*等等其他的模块*/]
  },
 
//其他配置
 
plugins: [
   
new webpack.optimize.CommonsChunkPlugin({
     
name: 'vendor'
   
})
  ]
}

 

示例二:

new webpack.optimize.CommonsChunkPlugin({
 
name: 'vender',
 
minChunks: function (module) {
   
// any required modules insidenode_modules are extracted to vendor
   
return (
      module.
resource &&
     
/\.js$/.test(module.resource) &&
      module.
resource.indexOf(
       
path.join(__dirname, 'node_modules')
      ) ===
0
   
)
  }
})

只要不主动升级第三方库的版本,vender文件就保持不变,因此迭代升级时浏览器中缓存的vender文件可以直接使用,美滋滋

Image


原来你是这样的公共模块切片

webpack配置output时,可以通过filename模板指定生成的文件名中加上hash值,方便当迭代升级时主动使得浏览器缓存失效。

output: {
 
filename: '[name].[chunkhash].js',
 
path: path.join(__dirname, 'dist')
}

但是——

Image

因为vender文件中不拒绝包含其他文件的文件名,而其他文件的文件名里的hash值是变化的,因此vender文件内容是变化的——vender文件的hash值也会随迭代升级而变化,太不负责任了

解决办法,再使用一次CommonsChunkPlugin插件

new webpack.optimize.CommonsChunkPlugin({
 
name: 'vender',
 
minChunks: function (module) {
   
// any required modules inside node_modules are extracted to vendor
   
return (
      module.
resource &&
     
/\.js$/.test(module.resource) &&
      module.
resource.indexOf(
        
path.join(__dirname, 'node_modules')
      ) ===
0
   
)
  }
}),
new webpack.optimize.CommonsChunkPlugin({
 
name: 'manifest' ,
 
minChunks: Infinity
}),

 

本期直播中的买一赠一

hash值的文件名时刻在变,怎么把打包、拆包生成的文件变成link、script元素自动插入到HTML文件中?使用HtmlWebpackPlugin

      配置选项:

·       title

·       filename

·       template

·       inject

·       minify

官方文档

https://webpack.js.org/plugins/commons-chunk-plugin/

https://webpack.js.org/plugins/html-webpack-plugin/

 

本次语音直播地址戳,可辅助理解、无限回看喔,更多精彩请加极客学院官方直播群。

Image