Webpack打包构建太慢了?试试这几个提升打包速率方案

Webpack 打包速率慢的问题在大型项目中尤为显着，影响开辟服从。以下是一些常见的优化技巧，可以资助提升 Webpack 的打包速率：

1. 减少文件搜索范围

• 使用 include 和 exclude:
  
  
  
  • 对于 babel-loader, ts-loader 等 loader，使用 include 指定需要处置惩罚的目次，或者使用 exclude 清除不需要处置惩罚的文件，减少 Webpack 搜索和处置惩罚的文件范围。
    
  
  

1. {
2.   test: /\.js$/,
3.   use: 'babel-loader',
4.   include: path.resolve(__dirname, 'src'), // 仅处理 src 目录
5.   exclude: /node_modules/ // 排除 node_modules 目录
6. }

复制代码

2. 优化 Loader

• 缓存 Loader 效果:
  
  
  
  • 使用 cache-loader 或者 babel-loader 的 cacheDirectory 选项，可以将 Loader 效果缓存到磁盘，以减少二次编译时间。
    
  
  

1. {
2.   test: /\.js$/,
3.   use: [
4.     'cache-loader',
5.     {
6.       loader: 'babel-loader',
7.       options: {
8.         cacheDirectory: true // 开启缓存
9.       }
10.     }
11.   ]
12. }

复制代码

并行处置惩罚:

• 使用 thread-loader 进行多历程并行处置惩罚，尤其对于繁重的编译任务如 Babel、TypeScript。
  

1. ​
2. {
3.   test: /\.js$/,
4.   use: [
5.     'thread-loader',
6.     'babel-loader'
7.   ]
8. }
10. ​

复制代码

3. 减少打包体积

• Tree Shaking:
  
  
  
  • 确保使用 ES6 模块化语法（import 和 export），并在生产环境下开启 mode: 'production'，Webpack 会主动执行 Tree Shaking，移除未使用的代码。
    
  
  
• 使用 SplitChunksPlugin:
  
  
  
  • 将第三方库、公共模块拆分为独立的包，制止每次打包都重新打包这些内容。
    
  
  

1. optimization: {
2.   splitChunks: {
3.     chunks: 'all',
4.   },
5. }

复制代码

• 按需加载:
  
  
  
  • 使用动态导入 (import()) 实现按需加载，减少初始打包体积，提升打包速率。
    
  
  

4. 开辟模式优化

• 使用 webpack-dev-server 的 hot 模式:
  
  
  
  • 开启热模块更换（HMR），只更新修改的部门，减少重建时间。
    
  
  

1. devServer: {
2.   hot: true,
3. }

复制代码

减少 Source Maps 的复杂度:

• 在开辟模式下，选择速率较快的 Source Map 类型，如 eval-source-map 或 cheap-module-source-map。
  

1. devtool: 'eval-source-map'

复制代码

5. 插件优化

• 移除不须要的插件:
  
  
  
  • 每个插件都会增长打包时间，移除不须要的插件来优化打包速率。
    
  
  
• 优化 TerserPlugin:
  
  
  
  • 对于 JavaScript 压缩插件 TerserPlugin，可以开启并行（parallel），利用多核 CPU 来加速压缩过程。
    
  
  

1. optimization: {
2.   minimize: true,
3.   minimizer: [
4.     new TerserPlugin({
5.       parallel: true, // 开启多进程压缩
6.     }),
7.   ],
8. }

复制代码

6. 使用持久化缓存

• Webpack 5 的持久化缓存:
  
  
  
  • Webpack 5 引入了持久化缓存功能，可以将打包效果缓存到文件系统，提升二次打包速率。
    
  
  

1. module.exports = {
2.   cache: {
3.     type: 'filesystem', // 使用文件系统缓存
4.   },
5. };

复制代码

通过这些优化策略，你可以显著提升 Webpack 的打包速率，尤其是在开辟和生产环境下都能体验到显着的性能提升。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。