【性能优化】Webpack打包优化

一. 使用缓存

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

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

内置cache模块

webpack5 内置了 cache 模块，缓存生成的 webpack 模块和 chunk，来改善构建速度。
在开发环境下，默认设置为 type: 'memory' 而在生产环境中被禁用。cache: { type: 'memory' } 与 cache: true 作用一样，可以通过设置 cache: { type: 'filesystem' } 来开放更多配置项。

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

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

cache-loader

安装

npm install cache-loader -D 

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

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