分离打包插件
- SplitChunksPlugin
使用webpack4.xx提供的SplitChunksPlugin,废弃了webpack3.xx中的CommonsChunkPlugin,CommonsChunkPlugin导致的主要问题是产出的chunk在引入时会产生重复的代码,无法优化异步chunk,高优的chunk产出需要的minchunks配置比较复杂,而SplitChunksPlugin能够解决掉CommonsChunkPlugin中所出现的问题。SplitChunksPlugin在production
模式下是默认开启的,但是它默认只作用于异步chunk,如果要作用于入口chunk的话,需要配置optimization.splitChunks.chunks: "all"
,同时webpack自动split chunks是有几个限制条件的:
- 新产出的vendor-chunk是要被共享的,或者模块来自npm包;
- 新产出的vendor-chunk的大小得大于30kb;
- 并行请求vendor-chunk的数量不能超出5个;
- 对于entry-chunk而言,并行加载的vendor-chunk不能超出3个。
这些限制可以在SplitChunks的默认配置项中可以一一对应的看到。
splitChunks: {
chunks: "async",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: true,
cacheGroups: {
default: {
minChunks: 2,
priority: -20
reuseExistingChunk: true,
},
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
}
}
}
其实不难理解这些限制,因为SplitChunksPlugin产生的结果就是原来chunk被拆分了,引入的文件数量会变多,因此需要在文件数量上进行限制。
- runtimeChunkPlugin
在使用CommonsChunkPlugin的时候,我们通常会把webpack runtime的基础函数提取出来,单独作为一个chunk,毕竟code splitting想把不变的代码单独抽离出来,方便浏览器缓存,提升加载速度。webpack4废弃了CommonsChunkPlugin,采用了runtimeChunkPlugin可以将每个entry chunk中的runtime部分的函数分离出来,只需要一个简单的配置:optimization.runtimeChunk: true
。
文件缓存
我们每次在更新代码重新部署时,会出现一个问题,就是没有看到我们最新更改的内容,常规的操作是清除浏览器缓存,重新刷新下浏览器,这时我们看到了最新的更新内容。之所以存在这种问题是因为我们没有给文件添加hash值,这里说明一下hash与chunkhash的不同,hash会每次都会更新,而chunkhash是根据你的文件内容是否有变化去更新,优点是不需要每次从服务端拉取资源,可以有效利用浏览器缓存,提高页面加载速度。具体实现代码如下:
configureWebpack: config => {
config.output.chunkFilename = 'js/[name].[chunkhash].js',//给每个js文件添加chunkhash后会自动更新已经改动的文件,而没有改动的文件则继续使用缓存。
config.output.filename = '[name].[chunkhash].js'
},