SWC编译器与Rust转译引擎深度解析

从AST转换到插件系统与Minify优化的全面剖析

SWC（Speedy Web Compiler）是一个基于Rust的超快JavaScript/TypeScript编译器，由Kang Donghoon开发。SWC是Babel的直接替代品，编译速度比Babel快20-70倍。SWC被Next.js、Turbopack、Vite、Deno等工具广泛采用。SWC的核心架构由Parser、Transformer和Codegen三部分构成。Parser将源码解析为AST（抽象语法树）。Transformer对AST执行各种转换（TypeScript剥离、JSX转换、装饰器处理等）。Codegen将AST重新生成代码。SWC的插件系统允许开发者编写自定义转换规则，插件使用Rust编写（性能最优）或通过JavaScript WASM调用（灵活性更高）。

一、SWC架构总览

SWC的架构由Parser、Transformer、Codegen和Plugin System构成。Parser使用Rust编写的解析器，支持ECMAScript 2024、TypeScript 5.x和JSX语法。Transformer包含多个内置转换：typescript（类型剥离）、react（JSX转换）、decorators（装饰器提案）、assumptions（转换假设）。Codegen生成优化的JavaScript代码。Plugin System支持Rust原生插件和JavaScript WASM插件。

// SWC基本使用（Node.js API）
const swc = require('@swc/core');
// 编译TypeScript
const result = await swc.transform(`
  const x: number = 42;
  interface User { name: string; }
  function greet(user: User) { return user.name; }
`, {
  jsc: {
    parser: {
      syntax: 'typescript',
      tsx: false,
      decorators: true,
      dynamicImport: true,
    },
    transform: {
      react: {
        runtime: 'automatic',
        importSource: 'react',
      },
      optimizer: {
        globals: { vars: { __DEBUG: 'false' } },
      },
    },
    target: 'es2022',
    minify: {
      compress: true,
      mangle: true,
    },
  },
  module: {
    type: 'es6',
  },
});
console.log(result.code);
// SWC配置文件
// .swcrc
{
  "$schema": "https://swc.rs/schema.json",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "importSource": "react",
        "throwIfNamespace": true,
        "development": false,
        "useBuiltins": true,
        "useSpread": true
      },
      "optimizer": {
        "globals": {
          "vars": {
            "__DEBUG": "false",
            "NODE_ENV": "\"production\""
          }
        },
        "simplify": true
      }
    },
    "target": "es2022",
    "loose": false,
    "keepClassNames": true,
    "externalHelpers": false
  },
  "module": {
    "type": "es6",
    "strict": true,
    "strictMode": true,
    "lazy": false,
    "noInterop": false
  },
  "minify": false,
  "sourceMaps": true,
  "inlineSourcesContent": false
}

二、TypeScript类型剥离

// SWC TypeScript stripping (Rust简化)
// 将TypeScript类型注解和接口定义剥离，保留运行时JavaScript
// 输入：
// const x: number = 42;
// function greet(user: User): string { return user.name; }
// interface User { name: string; }
// type ID = string | number;
// 输出：
// const x = 42;
// function greet(user) { return user.name; }
// (接口和类型别名被移除)
fn strip_types(module: &mut Module) {
    module.body.retain(|stmt| {
        match stmt {
            Stmt::TsTypeAlias(_) => false,  // 移除type别名
            Stmt::TsInterfaceDecl(_) => false,  // 移除interface
            _ => true,
        }
    });
    // 遍历所有语句，移除类型注解
    for stmt in &mut module.body {
        strip_type_annotations(stmt);
    }
}
fn strip_type_annotations(stmt: &mut Stmt) {
    match stmt {
        Stmt::Var(var) => {
            for decl in &mut var.decls {
                // 移除变量类型注解
                decl.var_type = None;
            }
        }
        Stmt::Fn(fn_stmt) => {
            // 移除函数参数类型注解
            for param in &mut fn_stmt.function.params {
                param.pattern.type_ann = None;
            }
            // 移除返回类型注解
            fn_stmt.function.return_type = None;
        }
        _ => {}
    }
}

三、JSX转换

// SWC JSX转换 (Rust简化)
// 将JSX转换为React.createElement或jsx函数调用
// React 17+的automatic runtime不需要导入React
// 输入: const el = <div className="x">{name}</div>;
// 输出(automatic runtime):
// import { jsx as _jsx } from "react/jsx-runtime";
// const el = _jsx("div", { className: "x", children: name });
fn transform_jsx(module: &mut Module, options: &JsxOptions) {
    // 添加import语句（automatic runtime模式）
    if options.runtime == JsxRuntime::Automatic {
        add_jsx_imports(module, options.import_source.as_str());
    }
    // 转换JSX表达式
    for stmt in &mut module.body {
        transform_jsx_in_stmt(stmt, options);
    }
}
fn transform_jsx_expr(expr: &mut Expr, options: &JsxOptions) {
    match expr {
        Expr::JsxElement(jsx) => {
            // <div className="x">children</div>
            // 转换为 jsx("div", { className: "x", children: [...] })
            let tag = get_tag_name(&jsx.opening);
            let props = collect_props(&jsx.opening);
            let children = collect_children(&jsx.children);
            // 生成jsx调用
            *expr = create_jsx_call(tag, props, children, options);
        }
        _ => {}
    }
}
// 输入JSX: <div className="x"><span>{value}</span></div>
// 转换后:
// _jsx("div", {
//   className: "x",
//   children: _jsx("span", { children: value })
// })

四、Minify压缩优化

// SWC Minify (Rust简化)
// 压缩包括：dead code elimination、variable mangling、constant folding
fn minify(module: &mut Module, options: &MinifyOptions) {
    // 1. Dead Code Elimination
    if options.compress {
        dead_code_elimination(module);
        // 移除if(false){}块
        // 移除未使用的变量
        // 常量折叠：1+2 → 3
        // 字面量内联
    }
    // 2. Variable Mangling
    if options.mangle {
        mangle_variables(module);
        // 将变量名缩短：variableName → a
        // 保留export的变量名
        // 保留globalThis的属性名
    }
    // 3. 生成压缩代码
    let mut codegen = Codegen::new();
    codegen.emit_module(module);
}
fn dead_code_elimination(module: &mut Module) {
    module.body.retain(|stmt| {
        match stmt {
            // 移除if(false){...}
            Stmt::If(if_stmt) => {
                if is_falsy(&if_stmt.test) {
                    return false;
                }
            }
            // 移除空语句
            Stmt::Empty(_) => return false,
            _ => {}
        }
        true
    });
    // 移除未使用的import
    module.body.retain(|stmt| {
        if let Stmt::Import(import) = stmt {
            return is_import_used(import, module);
        }
        true
    });
}
fn mangle_variables(module: &mut Module) {
    let mut renamer = Renamer::new();
    // 收集所有变量声明
    collect_var_decls(module, &mut renamer);
    // 重命名（跳过export的变量）
    rename_vars(module, &mut renamer);
    // 变量名映射：
    // originalName → a
    // anotherName → b
    // yetAnother → c
}

五、SWC插件系统

// SWC Rust插件
// 插件是一个Rust crate，实现Plugin trait
use swc_core::plugin::plugin_transform;
use swc_core::ast::*;
use swc_core::visit::VisitMut;
#[plugin_transform]
fn transform_transform(program: Program, config: serde_json::Value) -> Program {
    let mut visitor = MyVisitor::new();
    program.visit_with(&mut visitor);
    program
}
struct MyVisitor {
    count: usize,
}
impl VisitMut for MyVisitor {
    // 重写visit_mut_xxx方法来转换AST
    fn visit_mut_call_expr(&mut self, expr: &mut CallExpr) {
        // 将console.log()调用替换为空
        if let Callee::Expr(callee) = &expr.callee {
            if let Expr::Member(member) = &**callee {
                if let Expr::Ident(obj) = &*member.obj {
                    if obj.sym.to_string() == "console" {
                        // 移除console调用
                        self.count += 1;
                    }
                }
            }
        }
    }
}
// Cargo.toml
// [lib]
// crate-type = ["cdylib"]
// [dependencies]
// swc_core = { version = "0.x", features = ["plugin_transform"] }
// serde_json = "1.0"
// 编译后生成.wasm文件
// .swcrc中使用插件
{
  "jsc": {
    "experimental": {
      "plugins": [
        ["my-plugin.wasm", { "option1": true }]
      ]
    }
  }
}

六、与Babel对比

// Babel vs SWC对比
// 功能对比：
// TypeScript:  Babel (@babel/preset-typescript) | SWC (jsc.parser.syntax: "typescript")
// JSX:        Babel (@babel/preset-react) | SWC (jsc.transform.react)
// 装饰器:      Babel (@babel/plugin-proposal-decorators) | SWC (jsc.parser.decorators)
// 插件:       Babel (JavaScript插件) | SWC (Rust/WASM插件)
// 性能对比（1000个文件）：
// Babel: 约8秒
// SWC:  约0.3秒 (27x faster)
// 从Babel迁移
// .babelrc → .swcrc
// Babel presets → SWC jsc配置
// Babel plugins → SWC experimental.plugins
// 主要迁移点：
// 1. @babel/preset-env → jsc.target
// 2. @babel/preset-typescript → jsc.parser.syntax: "typescript"
// 3. @babel/preset-react → jsc.transform.react
// 4. 自定义Babel插件 → SWC Rust/WASM插件（或寻找替代方案）

七、实际应用场景

// Next.js中的SWC
// next.config.ts
export default {
  experimental: {
    swcMinify: true,  // 使用SWC替代terser进行压缩
    swcLoader: {
      // 自定义SWC加载器配置
    },
  },
};
// Vite中的SWC
// vite.config.ts
import { defineConfig } from 'vite';
import swc from 'vite-plugin-swc';
export default defineConfig({
  plugins: [swc()],
  esbuild: false,  // 禁用esbuild，使用SWC
});
// CLI使用
// npx @swc/cli src/index.ts -o dist/index.js
// npx @swc/cli src/ -d dist/ --config-file .swcrc
// npx @swc/cli src/index.ts -o dist/index.min.js --minify

八、总结

SWC通过Rust引擎实现了比Babel快20-70倍的JavaScript/TypeScript编译速度。Parser支持ECMAScript 2024、TypeScript和JSX。Transformer执行类型剥离、JSX转换和装饰器处理。Codegen生成优化的JavaScript代码。Minify模块通过dead code elimination和variable mangling实现代码压缩。插件系统支持Rust原生插件和WASM插件。被Next.js、Turbopack、Vite、Deno等主流工具广泛采用。从Babel迁移可以通过.swcrc配置文件完成。整体而言，SWC是前端编译工具链从JavaScript向Rust迁移的标杆项目。