性能优化的利器：SWC

简介

SWC（Speedy Web Compiler）=「用 Rust 写的高性能 JavaScript / TypeScript 编译器 + 压缩器 + 打包器」。

SWC 既可用于编译，也可用于打包。编译时，它使用现代 JavaScript 特性获取 JavaScript / TypeScript 文件，并输出所有主流浏览器支持的有效代码。

• SWC 在单线程上比 Babel 快 20 倍 ，在四核上比 Babel 快 70 倍 。

特点

• 极快的编译速度：
  基于 Rust 实现，利用多线程并行处理和高效内存管理，在大型项目中性能优势显著（如 Webpack 构建速度可提升 50%+）。
• 兼容 Babel 生态：
  支持 Babel 插件（如 @babel/preset-env），可无缝替代 Babel 进行代码转换（如 JSX、ESNext 语法转译）。
• TypeScript 支持：
  内置 TypeScript 转译能力，无需额外配置，且速度远快于官方 tsc 编译器。
• 集成打包工具：
  可作为独立的打包工具（类似 Webpack/Rollup），或作为现有工具的 loader（如 SWC-loader 替代 Babel-loader）。
• 插件系统：
  支持自定义插件，可扩展编译功能（如代码压缩、Tree-shaking）。

应用场景

• Webpack/Bundler 加速：
  在构建流程中替代 Babel-loader，大幅缩短编译时间（尤其适合大型项目）。
• 开发服务器热更新：
  提升 HMR（热模块替换）速度，减少开发者等待时间。
• TypeScript 项目：
  加速 TypeScript 代码编译，尤其在 CI/CD 环境中节省构建时间。
• Monorepo 项目：
  处理大量包时，性能优势更明显（如 TurboRepo 推荐使用 SWC）。

原理

SWC（Speedy Web Compiler）之所以能把 Babel/Webpack/Terser 的耗时从秒级压到毫秒级，是因为它把“JS → JS”这件事彻底拆成了 3 个阶段，并用 Rust + 并行 + 零拷贝 在每个阶段做到极致。

1. 解析（Parsing）

• 输入：UTF-8 源码。
• 核心结构：SourceMap + Lexer + Parser。
– SourceMap 负责行列号 ↔ 字节偏移的 O(1) 映射，生成 SourceMap 文件时零开销。
– Lexer 手写确定性状态机，无正则回溯；一次扫描产出 Token 流。
– Parser 用递归下降 + Pratt 表达式解析，直接把 Token 流建成 Typed AST（swc_ecma_ast::Module）。
• 并行：每个文件独立解析，Rust 无 GIL，可把所有 CPU 核吃满。

2. 转换（Transformation）

• AST 节点全部是 紧密内存布局的 enum/struct，遍历用 Visitor Pattern 加 指针 bump 分配，CPU Cache 命中率极高。
• 内建 passes：
ES6+ → ES5（arrow-functions, destructuring …）
TypeScript 擦除（strip_types）
JSX → React.createElement
• 插件机制：
Rust 原生插件（动态库 .so/.dylib/.dll）
WASM 插件（给 Node 侧用）
AST 修改 in-place；同一块内存反复写，无额外拷贝。

3. 代码生成（Code Generation）

• 把最终 AST 再线性扫一遍，直接 write! 到 String 或内存映射文件；
• Minifier 在同一代码生成阶段做：
– Dead-code elimination
– 标识符压缩（mangler）
– 常量折叠（1+2 → 3）
• SourceMap 同步生成：节点位置 → 原始行列号，映射表压缩（VLQ 编码）。

4. 额外加速手段

5. 一张时序图总结

源码文件 ──► Lexer(Token) ──► Parser(AST) ──► Transformer(AST) ──► Emitter(JS) ──► SourceMap
        Rust并行        零拷贝内存        插件链(并行)        同阶段压缩        VLQ映射

总结：

SWC 把“JS → JS”做成了 Rust 的流式并行管道——解析、转换、生成、压缩全部用零拷贝 AST 在内存里一步到位，因此能把 Babel+Terser 的 1 s 干到 10 ms。

使用

安装：

npm i -D @swc/cli @swc/core

基础配置：.swcrc（兼容 Babel 常用 preset）

{
  "jsc": {
    "parser": { "syntax": "typescript", "tsx": true },
    "target": "es2015"
  },
  "minify": true
}