webpack 缓存

webpack 缓存

babel-loader

 {
    test: /\.js$/,
    exclude: /node_modules/,
    use: [{
      loader: "babel-loader",
      options: {
        cacheDirectory: true
      }
    }],
  },

cache-loader

        use: [
          'cache-loader',
          ...loaders
        ],

请注意，保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此 loader。可以结合 smp 分析

hard-source-webpack-plugin

// webpack.config.js
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 
module.exports = {
  output: // ...
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

构建速度提升 50%以上 webpack5中会内置hard-source-webpack-plugin。