# 缓存
- 目的:提升二次构建速度
- 缓存思路:
- babel-loader 开启缓存:提升二次解析速度
- terser-webpack-plugin 开启缓存:提升二次压缩速度
- 使用 cache-loader 或者 hard-source-webpack-plugin:用于缓存 webpack 内部模块处理的中间结果,提升二次模块转换速度
如果开启了缓存,node_modules 文件加下,会有一个 .cache 文件夹目录。
# babel-loader 开启缓存
module: {
rules: [
{
test: /\.js$/,
//?cacheDirectory=true 开启缓存
use: 'babel-loader?cacheDirectory=true'//使用babel-loader解析ES6
}
]
}
# terser-webpack-plugin
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,//开启多进程并行压缩代码
cache: true,//开启缓存
}),
],
},
# 使用 cache-loader 或者 hard-source-webpack-plugin
//hard-source-webpack-plugin 开启缓存
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
output: {
filename: 'bundle.js'
},
plugins: [
new HardSourceWebpackPlugin()
]
};