持久缓存
使用webpack构建工程的时候,我们往常会把功能不同的代码打包到不同的包里(如lib,vendor,业务代码)。 而持久缓存的目的就是每一次更新线上代码的时候,尽可能使内容未做更改的模块的名字和之前保持一致。
使用webpack实现持久缓存主要需要解决:
-
webpack runtime代码分离
-
稳定moduleID
-
稳定chunkID
基本配置 webpack有提供2种hash命名的方式,
-
[hash]: 整次build生成一个唯一的hash值,赋给所有生成的文件。
显然,为了将文件名和内容相关联,应该使用chunkhash。
output: {
path: path.join(__dirname, 'dist/js'),
filename: '[name]-[chunkhash:8].js',
chunkFilename: 'chunks/[name].[chunkhash:8].js'
},
复制代码
这样配置虽然可以实现持久缓存,但是把所有的代码都打到了一起(vendor, 业务代码等),显示不符合要求。
webpack-runtime
使用CommonsChunkplugin将vendor单独打包:
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function(module) {
return /node_modules/.test(module.context);
}
})
复制代码
现在如果我对业务代码进行更改:
const helloWorld = () => {
console.log(`moment : ${moment()}`);
};
复制代码
按道理vendor已经单独打包,改变业务代码并不应该改变vendor的hash值,然而
原因是CommonsChunkplugin把vendor单独打出来的时候,还会将webpack自己生成的一部分runtime代码一起打进vendor. 如下图,runtime里牵扯到chunkid等容易频繁变更的元素,所以当业务代码发生变化的时候,runtime代码也会变。
这个问题也容易解决,再用CommonsChunkplugin把runtime代码单独打出来(CommonsChunkplugin会把runtime的代码打到配置指定的最后一个chunk里):
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
})
复制代码
Module ID
然而还没完,当我们在业务代码里增加一个entry,vendor的hash值又发生了变化。
entry: {
main: "./src/index.tsx",
sub: "./src/sub.tsx",
},
复制代码
造成这个问题的原因是当我们加入一个新entry的时候,因为webpack默认会依次用整数给这些module命名,如果新增的entry有新引入其他module,就会打乱之前module的命名。比如说当只有一个entry的时候,业务代码里定义了module: 0,1,2,3。vendor里定义了module 4,5。增加一个entry后:业务代码里会定义: 0,1,2,3,4。 vendor里定义module 5,6. (其实,就算sub没有引入新module,这里如果把main和sub的位置换一下也会造成vendor hash值变化,这和chunkID的值有关,后面会介绍)
可见,要生成稳定的chunkhash值,首先必须解决moduleID的问题。
NamedModulesPlugin & HashedModuleIdsPlugin
NamedModulesPlugin:使用文件的相对路径代替整数作为moduleID.
var isNumber = __webpack_require__("./node_modules/array-first/node_modules/is-number/index.js");
var slice = __webpack_require__("./node_modules/array-slice/index.js");
复制代码
不过也带来2个问题:
1.用相对路径代替数字,文件变大了
2.相对路径暴露了
HashedModuleIdsPlugin :主要就是为了解决以上2个问题,它对相对路径进行一个md5的摘要,不仅避免文件过大,也隐藏了路径。
Chunk ID
有时候一些模块可能在页面初始化的时候并用不到,可能会在之后的过程中(比如用户点击事件)才会用到,这一类模块可以通过动态import()来引入。
const helloWorld = () => {
import('./sub').then((module) => {
const sub = module.default;
sub();
})
};
复制代码
可以看到,动态引入的代码会被单独打包到chunks/里的文件里,而且vendor的值再次发生了改变。造成这个的原因是和moduleID类似,webpack默认使用整数作为chunkID,并且异步加载的chunk会先被赋值。 也就是说在没有动态引入之前,vendor的chunkID是0,动态引入之后,vendor文件的chunkID变为了1,所以造成了内容变化。(上面提到的改变entry顺序也会造成chunkID的变化)
NamedChunksPlugin:这个插件会用chunk的字符串name代替整数作为chunkID。不过要注意的是,动态生成的chunk并没有名字,所以需要手动给取个名字。
new webpack.NamedChunksPlugin(function(chunk) {
if (chunk.name) {
return chunk.name;
}
return chunk.mapModules(function(m){ return m.id}).join("_");
})
复制代码
至此,可能造成hash值不稳定的元素都被干掉。
Webpack4 更新
- CommonsChunksPlugin被干掉了,解决runtime貌似只需要使用optimization.runtimeChunk就能搞定了
NamedModulesPlugin -> optimization.namedModules (on by default in develoment mode)
开发模式下默认会使用NamedModulesPlugin。
目测我们还是需要自己解决chunkID的问题,具体怎么操作等下个月出了稳定版再学习吧。