Webpack 的构建过程本质上包括模块解析、加载、编译、优化、输出等多个阶段，因此优化手段也需从多个维度入手。

以下从开发模式（webpack-dev-server）和生产模式（webpack build）两个阶段，分别分析提高构建速度的关键策略。

---

一、通用优化策略

1. 合理使用缓存

• 开启持久化缓存（Webpack 5）：

  复制
  1module.exports = {
  2  cache: {
  3    type: 'filesystem',
  4  },
  5};

  能将模块编译结果缓存到磁盘，避免重复编译。

• babel-loader 开启缓存：

  复制
  1{
  2  loader: 'babel-loader',
  3  options: {
  4    cacheDirectory: true
  5  }
  6}

2. 减少模块解析范围

• 使用 include / exclude 精准匹配

  复制
  1{
  2  test: /\.js$/,
  3  loader: 'babel-loader',
  4  include: path.resolve(__dirname, 'src'),
  5  exclude: /node_modules/
  6}

• 配置 resolve.extensions 精简后缀解析

  复制
  1resolve: {
  2  extensions: ['.js', '.ts']
  3}

• 配置 resolve.alias 减少深层查找

  复制
  1resolve: {
  2  alias: {
  3    '@': path.resolve(__dirname, 'src')
  4  }
  5}

3. 并行/多进程处理

• 使用 thread-loader 处理 JS/TS 转译等耗时任务：

  复制
  1{
  2  test: /\.js$/,
  3  use: ['thread-loader', 'babel-loader']
  4}

• 使用 terser-webpack-plugin 的并行压缩： Webpack 5 中默认已启用，手动配置时可设置：

  复制
  1optimization: {
  2  minimize: true,
  3  minimizer: [new TerserPlugin({ parallel: true })]
  4}

---

二、开发阶段优化（提升热更新和增量编译速度）

1. 使用 webpack-dev-server + HMR

• 启用热模块替换（HMR），只更新变更部分，提高效率；
• 配合 React Fast Refresh、Vue HMR 插件，提升开发体验。

2. 开启 source-map 优化模式

• 开发阶段推荐：

  复制
  1devtool: 'cheap-module-source-map'

  比 eval-source-map 更快，调试体验仍可接受。

3. 使用模块缓存机制

• Webpack 会将未变更模块缓存，如果未配置 module.id，建议开启：

  复制
  1optimization: {
  2  moduleIds: 'deterministic'
  3}

---

三、生产阶段优化（压缩构建产物）

1. Tree Shaking（摇树优化）

• 确保使用 ESModule 规范（import/export），否则无法移除无用代码；

• 设置 sideEffects: false，移除副作用模块（需谨慎）：

  复制
  1// package.json
  2{
  3  "sideEffects": false
  4}

2. 合理分包 + 动态引入

• 利用 SplitChunksPlugin 拆分公共依赖和第三方库，减少重复打包：

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

• 对大型路由模块按需加载，减少初始构建体积。

3. 缩小构建目标范围

• 使用 IgnorePlugin 忽略无用语言包等：

  复制
  1new webpack.IgnorePlugin({
  2  resourceRegExp: /^\.\/locale$/,
  3  contextRegExp: /moment$/,
  4});

• 精简 polyfill，例如使用 core-js-pure 或按需引入。

---

四、其他技巧与工具

1. 使用 webpack-bundle-analyzer 分析体积

复制
1const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

定位冗余依赖和重复打包问题。

2. 使用轻量替代库

• 用 dayjs 替代 moment；
• 用 lodash-es + Tree Shaking 替代整个 lodash。

3. 升级到 Webpack 5

Webpack 5 提供了更好的缓存机制、更快的构建性能和内置优化能力。