充分利用缓存提升二次构建速度

缓存

• 目的：提升二次构建速度
• 缓存思路：
  • 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()
    ]
};

参考

• 玩转webpack-全方位掌握webpack核心技能和优化策略