SWC 简介 #

什么是 SWC？ #

SWC（Speedy Web Compiler）是一个用 Rust 编写的超快速 JavaScript/TypeScript 编译器和打包器。它可以用于编译、压缩和打包 JavaScript 和 TypeScript 代码，速度比 Babel 快 20 倍以上。

核心定位 #

text 
┌─────────────────────────────────────────────────────────────┐
│                         SWC                                  │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  超快编译    │  │  Rust 编写  │  │  可扩展     │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  TypeScript │  │  打包功能    │  │  代码压缩   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

SWC 的历史 #

发展历程 #

text 
2017年 ─── SWC 项目启动
    │
    │      강동윤 (DongYoon Kang) 开发
    │      专注于性能优化
    │
2019年 ─── 开源发布
    │
    │      GitHub 开源
    │      社区开始关注
    │
2020年 ─── 生态扩展
    │
    │      Next.js 采用
    │      Parcel 2 集成
    │
2021年 ─── 功能完善
    │
    │      打包功能
    │      插件系统
    │
2022年 ─── 广泛采用
    │
    │      Vite 插件支持
    │      更多框架集成
    │
至今   ─── 行业标准
    │
    │      主流构建工具选择
    │      持续性能优化

里程碑版本 #

版本 时间 重要特性
1.0 2019 首次发布，基础编译功能
1.2 2020 TypeScript 支持
1.3 2021 打包功能（spack）
2.0 2022 插件系统，WASM 支持
2.1 2022 改进的错误信息
2.2 2023 性能优化，更多语法支持

为什么选择 SWC？ #

传统编译器的性能瓶颈 #

JavaScript 编译器如 Babel 使用 JavaScript 编写，在处理大型项目时性能成为瓶颈：

javascript 
// Babel 编译大型项目
// 时间：30-60 秒
// 内存：1-2 GB

// SWC 编译相同项目
// 时间：1-3 秒
// 内存：200-400 MB

SWC 的解决方案 #

text 
┌─────────────────────────────────────────────────────────────┐
│                    性能对比（相对速度）                       │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  Babel    ████████████████████████████████████  1x          │
│                                                              │
│  SWC      █                                  20x+           │
│                                                              │
└─────────────────────────────────────────────────────────────┘

SWC 的核心特点 #

1. 极致性能 #

使用 Rust 编写，性能远超 JavaScript 工具：

bash 
# 编译 1000 个文件

# Babel
time babel src -d dist
# real    0m45.234s

# SWC
time swc src -d dist
# real    0m1.876s

2. 多功能合一 #

一个工具完成多种任务：

javascript 
// .swcrc
{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "target": "es2015"
  },
  "minify": true,
  "sourceMaps": true
}

3. 与 Babel 兼容 #

支持大部分 Babel 插件的功能：

javascript 
// 装饰器
@decorator
class Example {}

// 类属性
class Example {
  property = 'value';
}

// 管道操作符（提案）
value |> fn

4. 插件系统 #

支持通过 WASM 编写插件：

javascript 
// swc 插件配置
{
  "jsc": {
    "experimental": {
      "plugins": [
        ["my-plugin", { "option": "value" }]
      ]
    }
  }
}

5. 打包功能 #

内置打包器（spack）：

javascript 
// spack.config.js
module.exports = {
  entry: {
    web: __dirname + '/src/web.js',
    node: __dirname + '/src/node.js',
  },
  output: {
    path: __dirname + '/dist',
  },
};

SWC 与其他工具对比 #

SWC vs Babel #

特性 SWC Babel
语言 Rust JavaScript
速度 极快 较慢
插件生态 🔄 发展中 ✅ 成熟
配置兼容 部分兼容 -
自定义能力 WASM 插件 JS 插件
学习曲线 低 中
社区支持 🔄 增长中 ✅ 庞大

SWC vs esbuild #

特性 SWC esbuild
语言 Rust Go
速度 极快 极快
TypeScript ✅ 原生 ✅ 原生
打包 ✅ 支持 ✅ 强大
插件 WASM JS
装饰器 ✅ 完整 ⚠️ 有限
错误信息 ✅ 详细 ✅ 良好

SWC vs tsc #

特性 SWC tsc
速度 极快 慢
类型检查 ⚠️ 需配合 ✅ 完整
语法转换 ✅ 完整 ✅ 完整
类型生成 ✅ 支持 ✅ 原生
配置 简单 复杂

SWC 的应用场景 #

1. 开发构建 #

替代 Babel 进行快速编译：

json 
// package.json
{
  "scripts": {
    "build": "swc src -d dist",
    "dev": "swc src -d dist -w"
  }
}

2. 框架集成 #

主流框架的内置支持：

text 
┌─────────────────────────────────────────────────────────────┐
│                    使用 SWC 的框架                           │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  Next.js      ─── 默认编译器（v12+）                         │
│                                                              │
│  Parcel 2     ─── 内置转译器                                 │
│                                                              │
│  Deno         ─── 内置编译器                                 │
│                                                              │
│  Vite         ─── 通过插件支持                               │
│                                                              │
│  Turbopack    ─── 基于 SWC 构建                              │
│                                                              │
└─────────────────────────────────────────────────────────────┘

3. 库开发 #

快速打包 JavaScript/TypeScript 库：

javascript 
// .swcrc
{
  "jsc": {
    "parser": {
      "syntax": "typescript"
    },
    "target": "es2015",
    "externalHelpers": true
  },
  "module": {
    "type": "commonjs"
  }
}

4. 代码压缩 #

生产环境代码优化：

javascript 
// .swcrc
{
  "jsc": {
    "minify": {
      "compress": true,
      "mangle": true
    }
  }
}

SWC 的核心概念 #

编译（Compilation） #

将现代 JavaScript/TypeScript 转换为目标版本：

javascript 
// 输入
const greet = (name: string) => `Hello, ${name}!`;

// 输出（ES5）
var greet = function(name) {
  return "Hello, " + name + "!";
};

压缩（Minification） #

减小代码体积：

javascript 
// 输入
function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    total += item.price * item.quantity;
  }
  return total;
}

// 输出
function calculateTotal(e){let t=0;for(const o of e)t+=o.price*o.quantity;return t}

打包（Bundling） #

将多个模块合并：

javascript 
// spack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist/bundle.js'
  }
};

解析（Parsing） #

将源代码转换为 AST：

text 
源代码 ───► 词法分析 ───► 语法分析 ───► AST

SWC 的工作流程 #

text 
┌─────────────────────────────────────────────────────────────┐
│                     SWC 编译流程                             │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐              │
│  │ 源代码    │ -> │ 词法分析  │ -> │ 语法分析  │              │
│  └──────────┘    └──────────┘    └──────────┘              │
│                                        │                     │
│                                        ▼                     │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐              │
│  │ 输出代码  │ <- │ 代码生成  │ <- │ AST 转换  │              │
│  └──────────┘    └──────────┘    └──────────┘              │
│                                                              │
└─────────────────────────────────────────────────────────────┘

详细步骤 #

  1. 词法分析：将源代码转换为 token 流
  2. 语法分析：将 token 流转换为 AST
  3. AST 转换：应用转换规则修改 AST
  4. 代码生成：将 AST 转换为目标代码

支持的语法特性 #

ECMAScript 特性 #

特性 支持
ES2015 (ES6) ✅
ES2016 ✅
ES2017 ✅
ES2018 ✅
ES2019 ✅
ES2020 ✅
ES2021 ✅
ES2022 ✅
ES2023 ✅

TypeScript 特性 #

特性 支持
类型注解 ✅
接口 ✅
泛型 ✅
装饰器 ✅
命名空间 ✅
枚举 ✅
类型导入 ✅

提案特性 #

特性 支持
装饰器 ✅
类字段 ✅
私有方法 ✅
管道操作符 ✅
记录与元组 🔄

学习路径 #

text 
入门阶段
├── 安装与配置
├── 基本使用
├── 命令行工具
└── 配置文件

进阶阶段
├── 编译配置
├── 代码压缩
├── 打包功能
└── Source Map

高级阶段
├── 插件开发
├── 工具集成
├── 性能优化
└── 自定义转换

实战阶段
├── 项目迁移
├── 框架集成
├── 库开发
└── 最佳实践

下一步 #

现在你已经了解了 SWC 的基本概念，接下来学习 安装与配置 开始实际使用 SWC！

最后更新：2026-03-28