0


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

Webpack 打包速度慢的问题在大型项目中尤为明显,影响开发效率。以下是一些常见的优化技巧,可以帮助提升 Webpack 的打包速度:

1. 减少文件搜索范围

  • 使用 includeexclude:- #### 对于 babel-loader, ts-loader 等 loader,使用 include 指定需要处理的目录,或者使用 exclude 排除不需要处理的文件,减少 Webpack 搜索和处理的文件范围。

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

2. 优化 Loader

  • 缓存 Loader 结果:- #### 使用 cache-loader 或者 babel-loadercacheDirectory 选项,可以将 Loader 结果缓存到磁盘,以减少二次编译时间。

{
  test: /\.js$/,
  use: [
    'cache-loader',
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true // 开启缓存
      }
    }
  ]
}

并行处理:

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

​
{
  test: /\.js$/,
  use: [
    'thread-loader',
    'babel-loader'
  ]
}

​

3. 减少打包体积

  • Tree Shaking:- #### 确保使用 ES6 模块化语法(importexport),并在生产环境下开启 mode: 'production',Webpack 会自动执行 Tree Shaking,移除未使用的代码。

  • 使用 SplitChunksPlugin:- #### 将第三方库、公共模块拆分为独立的包,避免每次打包都重新打包这些内容。

optimization: {
  splitChunks: {
    chunks: 'all',
  },
}
  • 按需加载:- #### 使用动态导入 (import()) 实现按需加载,减少初始打包体积,提升打包速度。

4. 开发模式优化

  • 使用 webpack-dev-serverhot 模式:- #### 开启热模块替换(HMR),只更新修改的部分,减少重建时间。

devServer: {
  hot: true,
}

减少 Source Maps 的复杂度:

  • 在开发模式下,选择速度较快的 Source Map 类型,如 eval-source-mapcheap-module-source-map

devtool: 'eval-source-map'

5. 插件优化

  • 移除不必要的插件:- #### 每个插件都会增加打包时间,移除不必要的插件来优化打包速度。

  • 优化 TerserPlugin:- #### 对于 JavaScript 压缩插件 TerserPlugin,可以开启并行(parallel),利用多核 CPU 来加速压缩过程。

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      parallel: true, // 开启多进程压缩
    }),
  ],
}

6. 使用持久化缓存

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

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

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

标签: webpack 前端 node.js

本文转载自: https://blog.csdn.net/qq_67572731/article/details/141128936
版权归原作者 NMY112 所有, 如有侵权,请联系我们删除。

“Webpack打包构建太慢了?试试这几个提升打包速度方案”的评论:

还没有评论