如何提高webpack 打包速度

一、缩小文件搜索范围

二、提取公共模块：使用dllPlugin提取共用公用模块，打包出vendor.js,避免重复编译

三、开进程转换：thread-loader开启多进程loader转换

四、开进程压缩：使用paralleUglifyPlugin开启多进程压缩JS文件

五、利用缓存：webpack.cache、babel-loader.cacheDirectory、terser-webpack-plugin 开启缓存，都可以利用缓存提高rebuild效率

补充

补充：优化 webpack 构建速度可从"缩小搜索范围 → 并行 / 缓存 → 减小产物 → 升级工具链"几个层面入手：

缩小文件搜索范围：配置 resolve.extensions（不要放太多后缀）、resolve.alias（路径别名）、resolve.modules 指定 node_modules 绝对路径；loader 中用 include / exclude 限定处理范围（如 exclude: /node_modules/）。

多进程 / 多实例：把耗时 loader 放进 thread-loader；TerserPlugin / css-minimizer-webpack-plugin 开启 parallel: true 利用多核压缩。

DLL / 缓存：用 DLLPlugin 把不常变动的库单独打包；开启 babel-loader 的 cacheDirectory、terser 的 cache、cache-loader 把中间产物缓存到磁盘，二次构建可显著提速。

缩小打包作用域：开启 sideEffects: false + usedExports: true 配合 @babel/preset-env 做好 tree shaking；用 splitChunks 把 runtime、第三方依赖、业务代码拆开，配合持久化缓存（cache: { type: 'filesystem' }，webpack 5）。

升级工具：用 swc-loader / esbuild-loader 替代 babel-loader / ts-loader（10x+ 速度差）；升级到 webpack 5 + Node.js 18+ 享受 V8 性能与持久缓存。

减少构建目标：开发模式 mode: 'development' + devtool: 'eval-cheap-module-source-map'；生产模式开启代码压缩、SplitChunks、CSS 抽取。

使用新方案：Vite 在开发时基于浏览器原生 ESM，秒级冷启动；生产用 Rollup 打包（Vue 3、React、Ant Design 等都已转向）。