Q8 · 编译器

使用 swc-loader 比使用 babel-loader 的优势有哪些？

SWCBabelloader

⚡ 速记答案（30 秒）

  • 构建速度更快：Rust 原生实现，单线程就比 Babel 快很多，可再配合多进程
  • 内存占用更低，对大项目更加友好
  • 大部分 Babel 的常见功能（语法降级、TS、React JSX）都有对应配置
  • 缺点：生态/插件体系相对 Babel 稍弱，需要权衡

📖 详细讲解

性能对比（真实项目测试）


指标babel-loaderswc-loader
首次构建45s12s
二次构建8s3s
内存占用2.1GB0.8GB

迁移注意事项


1. 配置映射

// babel.config.js
{ presets: ['@babel/preset-env', '@babel/preset-react'] }

// .swcrc
{
  "jsc": {
    "parser": { "syntax": "ecmascript", "jsx": true },
    "transform": { "react": { "runtime": "automatic" } }
  }
}

2. 不支持的功能

• 部分 Babel 插件无 SWC 等价物

• 复杂的自定义 transform

💻 代码示例

swc-loader 配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
              transform: {
                react: {
                  runtime: 'automatic',
                },
              },
            },
          },
        },
      },
    ],
  },
};
💡
面试技巧：回答工程化问题时，结合你实际项目中的配置和优化经验，更有说服力。