Q1 · Webpack

提高 Webpack 5 构建速度都有哪些方案？

Webpack构建速度缓存

⚡ 速记答案（30 秒）

  • 缓存：cache: filesystem、babel-loader/ts-loader 开启缓存
  • 并行：thread-loader、parallel-webpack，多进程编译
  • 缩小构建范围：include/exclude、合理设置 resolve.modules、alias、extensions
  • 持久化缓存 + 增量编译：利用 webpack-dev-server HMR、watch
  • 优化 Loader/Plugin 数量：只在必要环境启用（如生产环境才压缩）
  • 使用 swc/esbuild 等更快的编译器替代 Babel/Terser

📖 详细讲解

构建速度优化策略


1. 缓存优化


Webpack 5 内置了持久化缓存：


module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
};

2. 并行处理


工具作用
thread-loader多线程编译 JS
parallel-webpack多配置并行构建
esbuild-loader替代 babel-loader

3. 缩小范围


module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      include: path.resolve('src'), // 只处理 src
      exclude: /node_modules/,
    }],
  },
  resolve: {
    extensions: ['.ts', '.js'], // 减少扩展名
    alias: { '@': path.resolve('src') },
  },
};

💻 代码示例

Webpack 5 缓存 + 并行配置
const path = require('path');

module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve('.cache/webpack'),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'thread-loader',
            options: { workers: 4 },
          },
          {
            loader: 'ts-loader',
            options: { happyPackMode: true },
          },
        ],
        include: path.resolve('src'),
      },
    ],
  },
};
💡
面试技巧：回答工程化问题时，结合你实际项目中的配置和优化经验，更有说服力。