webpack(性能优化三)

如何做bable缓存和文件资源缓存

（一）bable缓存
答：因为bable要对我们写的js代码做编译处理，编译成一种浏览器能识别的语法，即所谓的js兼容性处理。在编译过程中，假设有100个js模块，只改动其中1个js模块，不可能把全部的模块都重新编译一遍，其他99个应该是不变的，这一点跟前面文章讲过的HMR功能一样：一个模块变，只变这一个模块，其他模块不变。而生产环境下又不能使用HMR功能，因为HMR是基于devServer，生产环境是不需要devServer的。
开启bable缓存只需要在bable-loader的配置里加一个参数即可：cacheDirectory: true
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
// 开启babel缓存
// 第二次构建时，会读取之前的缓存
cacheDirectory: true
}
},

（二）文件资源缓存
答： 假使我们的资源在强缓存期间出现了严重的bug，开发人员需要紧急修复，但因为资源被强制缓存，就算修复了，也会因为还在强缓存期间而无效
有三种方法可以修改资源名称
1.hash值：每次wepack构建时会生成一个唯一的hash值，
问题: 因为js和css同时使用一个hash值， 如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）

2.chunkhash值：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样
问题：js和css的hash值还是一样的， 因为css是在js中被引入的，所以同属于一个chunk

3.contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样

参考文献：https://blog.csdn.net/weixin_45844049/article/details/120022585