【性能优化】Webpack打包优化

田本初2024-08-03 10:23

一. 使用缓存

通过使用缓存，能够有效提升打包速度。

webpack5以下：cache-loader
webpack5：内置cache模块

内置cache模块

webpack5 内置了 cache 模块，缓存生成的 webpack 模块和 chunk，来改善构建速度。

在开发环境下，默认设置为 type: 'memory' 而在生产环境中被禁用。cache: { type: 'memory' } 与 cache: true 作用一样，可以通过设置 cache: { type: 'filesystem' } 来开放更多配置项。

javascript 复制代码

module.exports = {
  cache: {
    type: 'filesystem',
  },
};

会在 node_modules 目录下生成一个 .cache 目录缓存文件内容，二次打包速度显著提升。

cache-loader

安装

javascript 复制代码

npm install cache-loader -D

在 webpack.config.js 对应的开销大的 loader 前加上 cache-loader。
注意：如果使用多线程加载器如 thread-loader 时，也需要确保 cache-loader 放在 thread-loader 之前。

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'cache-loader',
          'babel-loader'
        ]
      }
    ]
  }
}