SWC 深入全面讲解

一、核心功能与原理

1. 高性能编译

Rust 架构优势 ：SWC 基于 Rust 编写，利用 Rust 的性能和并发性优势，编译速度比 Babel 快约 20 倍，比 TypeScript 编译器更快。
并行编译 ：支持多线程并行处理，在四核基准测试中编译速度提升 70 倍。
增量编译：仅重新编译变更文件，加速开发模式热更新。

2. 模块化设计

插件系统 ：
- 基于 WASM 的插件架构，允许用 Rust 或 WASM 编写插件，解决 JS 插件性能问题。
- 官方插件如 @swc/jest、vite-plugin-swc 已实现常用功能。
扩展性 ：通过 .swcrc 配置文件自定义编译规则，支持 ES5 到 ESNext 的语法转换。

3. 兼容性

语言支持：全面支持 TypeScript、JSX、TSX，以及最新 ECMAScript 标准。
框架集成：与 Webpack、Vite、NestJS 等框架无缝集成，替代传统编译器。

二、安装与配置

1. 快速安装

bash 复制代码

# npm
npm install @swc/core @swc/cli --save-dev

# Yarn
yarn add @swc/core @swc/cli --dev

2. 基础配置（.swcrc）

json 复制代码

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true
    },
    "transform": {
      "legacyDecorator": true
    },
    "target": "es2020"
  },
  "module": {
    "type": "es6"
  },
  "sourceMaps": true
}

三、工具集成指南

1. Webpack 集成

安装 loader ：

bash 复制代码

npm install @swc-webpack-loader --save-dev

配置示例 ：

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: {
          loader: '@swc-webpack-loader',
          options: {
            swcrc: true
          }
      }
    ]
  }
};

2. Vite 集成

安装插件 ：
bash 复制代码
```
npm install vite-plugin-swc --save-dev
```

配置示例 ：

typescript 复制代码

import swc from 'vite-plugin-swc';

export default defineConfig({
  plugins: [swc()],
  build: {
    target: 'es2020'
  }
});

3. NestJS 集成

启用 SWC Builder ：

json 复制代码

// nest-cli.json
{
  "compilerOptions": {
    "builder": "swc",
    "typeCheck": true
  }
}

命令行使用 ：
bash 复制代码
```
nest start -b swc --type-check
```

四、性能对比与优化

1. 编译速度基准测试

工具	ES3	ES2015	ES2016	ES2017	ES2018
SWC	761 ops	800 ops	2123 ops	2131 ops	2981 ops
Babel	41.75 ops	-	-	-	-

2. 优化策略

Tree Shaking：内置高效死码消除，减少打包体积。
源码映射 ：通过 sourceMaps: true 生成调试映射文件。
跳过库检查 ：skipLibCheck: true 加速编译（需谨慎使用）。

五、高级特性与插件开发

1. 插件示例（Rust）

rust 复制代码

// 创建 WASM 插件模板
swc plugin new --target-type wasm32-wasi my-plugin

// 插件核心逻辑（简化版）
use swc_core::ecma::ast::{Expr, Program};
use swc_core::ecma::visit::{visit_program, Visit};

struct Plugin;

impl Visit for Plugin {
    fn visit_program(&mut self, program: &mut Program) {
        // 自定义 AST 转换逻辑
    }
}

2. 自定义配置场景

多入口编译 ：

json 复制代码

{
  "entry": {
    "app": "./src/index.ts",
    "vendor": "./src/vendor.ts"
  }
}

环境变量注入 ：

json 复制代码

{
  "env": {
    "NODE_ENV": "production"
  }
}

六、常见问题与解决方案

1. 模块解析失败

原因：未正确配置路径别名。

解决：

json 复制代码

{
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }
}

2. 装饰器报错

原因：未启用装饰器支持。

解决：

json 复制代码

{
  "jsc": {
    "transform": {
      "legacyDecorator": true
    }
  }
}

3. 生产环境构建优化

启用压缩 ：

json 复制代码

{
  "minify": true,
  "compress": {
    "drop_console": true
  }
}

七、总结与推荐配置

1. 核心优势

速度：编译速度领先传统工具一个数量级。
兼容性：支持 TypeScript 装饰器、JSX 等高级语法。
生态整合：与主流构建工具深度集成。

2. 推荐配置模板

json 复制代码

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "legacyDecorator": true
    },
    "target": "es2020"
  },
  "module": {
    "type": "es6"
  },
  "sourceMaps": true,
  "minify": false,
  "env": {
    "targets": "chrome 100"
  }
}

通过合理配置 SWC，可在开发效率与构建性能之间取得最佳平衡，尤其适合中大型 TypeScript 项目。