跳到主要内容

SWC

问题​

SWC 是什么？它如何替代 Babel？为什么比 Babel 快这么多？

答案​

SWC（Speedy Web Compiler）是用 Rust 编写的 JavaScript/TypeScript 编译器，是 Babel 的高性能替代品。Next.js 从 v12 开始默认使用 SWC。

关于 Babel 原理，可参考 Babel 原理。

SWC vs Babel​

维度BabelSWC
语言JavaScriptRust
速度1x（基准）20-70x
线程单线程多线程（Rayon）
功能编译 + Polyfill编译 + 压缩 + 打包
插件JS 插件生态丰富Wasm 插件（有限）
使用独立工具Next.js/Vite 内置

为什么 SWC 快 20x+​

核心原因：

  1. Arena 内存分配：AST 节点在连续内存中，缓存命中率高
  2. 无 GC：没有运行时垃圾回收暂停
  3. 多线程：Rayon 并行处理多个文件
  4. 单 pass 优化：多个变换合并为一次 AST 遍历

在项目中使用 SWC​

next.config.js
// Next.js 12+ 默认使用 SWC，无需配置
module.exports = {
  // SWC 自动替代 Babel
  // 如果项目有 .babelrc，Next.js 会 fallback 到 Babel
}
.swcrc
{
  "$schema": "https://swc.rs/schema.json",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    },
    "target": "es2020"
  }
}

常见面试问题​

Q1: SWC 的插件生态能替代 Babel 吗？​

答案：

不完全能。SWC 覆盖了 Babel 80%+ 的常用功能（语法降级、JSX 转换、TypeScript 编译），但自定义插件生态远不如 Babel 丰富。SWC 插件用 Wasm 编写，开发门槛高。

Next.js 的策略：SWC 处理常见变换，遇到不支持的 Babel 插件时自动 fallback 到 Babel。

相关链接​