如何优化swc-loader配置，解决替代ts-loader后Webpack构建变慢问题

你的swc-loader配置缺少关键优化项，导致其性能不如启用了transpileOnly: true的ts-loader。以下是针对性的优化配置及说明：

核心优化配置项 #

1. 开启编译缓存 #

swc-loader支持磁盘缓存，开启后会复用之前的编译结果，大幅减少重复构建的时间，甚至首次构建也能通过缓存机制提升效率。同时明确排除node_modules目录，避免编译已处理好的第三方依赖：

test: /\.tsx?$/,
exclude: /node_modules/,
use: [
  {
    loader: 'swc-loader',
    options: {
      cacheDirectory: true, // 开启磁盘缓存
      jsc: {
        parser: {
          syntax: 'typescript',
          tsx: true,
        },
      },
    },
  }
]

2. 明确关闭类型检查 #

和ts-loader的transpileOnly: true保持一致，显式关闭swc的类型检查（swc默认转译时不执行类型检查，但显式配置可避免潜在的隐式开销）：

jsc: {
  parser: {
    syntax: 'typescript',
    tsx: true,
  },
  typeCheck: false, // 明确关闭类型检查
}

3. 指定目标环境 #

明确设置目标JavaScript版本，让swc只做必要的语法转译，避免过度编译。根据项目兼容需求选择合适的目标，比如面向现代浏览器可设为es2020：

jsc: {
  parser: {
    syntax: 'typescript',
    tsx: true,
  },
  typeCheck: false,
  target: 'es2020', // 指定目标JS版本
}

4. 启用SWC内置优化 #

开启swc的原生代码优化，在不影响功能的前提下减少编译开销，同时优化输出代码：

jsc: {
  parser: {
    syntax: 'typescript',
    tsx: true,
  },
  typeCheck: false,
  target: 'es2020',
  optimize: {
    deadCodeElimination: true, // 开启死代码消除
    globals: {
      envs: ['browser', 'es2021'], // 适配运行环境
    },
  },
}

5. （可选）配合thread-loader进一步并行化 #

对于超大型项目，可在swc-loader前添加thread-loader，将编译任务拆分到多个线程执行，最大化利用CPU核心：

test: /\.tsx?$/,
exclude: /node_modules/,
use: [
  'thread-loader', // 先拆分任务到多线程
  {
    loader: 'swc-loader',
    options: {
      cacheDirectory: true,
      jsc: {
        parser: {
          syntax: 'typescript',
          tsx: true,
        },
        typeCheck: false,
        target: 'es2020',
        optimize: {
          deadCodeElimination: true,
          globals: {
            envs: ['browser', 'es2021'],
          },
        },
      },
    },
  }
]

完整优化后配置示例 #

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'swc-loader',
            options: {
              cacheDirectory: true,
              jsc: {
                parser: {
                  syntax: 'typescript',
                  tsx: true,
                },
                typeCheck: false,
                target: 'es2020',
                optimize: {
                  deadCodeElimination: true,
                  globals: {
                    envs: ['browser', 'es2021'],
                  },
                },
              },
            },
          }
        ]
      },
      // ...其他规则
    ]
  }
}

优化完成后，重新执行time yarn build进行基准测试，应该能看到明显的耗时下降。

内容的提问来源于stack exchange，提问作者Adharsh M