|$ curl https://forge-ai.dev/api/markdown?path=docs/build-tools/swc
Introduction
SWC (Speedy Web Compiler) is a Rust-based JavaScript/TypeScript compiler that's 20-70x faster than Babel. It handles transpilation, minification, and bundling with native performance. Next.js uses SWC as its default compiler since v13.
Installation
install.sh
Bash
| 1 | # Standalone CLI |
| 2 | npm install -D @swc/cli @swc/core |
| 3 | |
| 4 | # With webpack (swc-loader) |
| 5 | npm install -D @swc/core swc-loader |
| 6 | |
| 7 | # With Vite (vite-plugin-swc) |
| 8 | npm install -D vite-plugin-swc |
| 9 | |
| 10 | # With Next.js — already built-in! |
| 11 | # No installation needed — use next.config.js |
CLI Usage
swc-cli.sh
Bash
| 1 | # Transpile a file |
| 2 | npx swc src/index.ts -o dist/index.js |
| 3 | |
| 4 | # Transpile directory |
| 5 | npx swc src -d dist |
| 6 | |
| 7 | # With configuration |
| 8 | npx swc src -d dist --config-file .swcrc |
| 9 | |
| 10 | # Minify |
| 11 | npx swc src -o dist/index.min.js --minify |
| 12 | |
| 13 | # Watch mode |
| 14 | npx swc src -d dist --watch |
.swcrc
JSON
| 1 | { |
| 2 | "jsc": { |
| 3 | "parser": { |
| 4 | "syntax": "typescript", |
| 5 | "tsx": true, |
| 6 | "decorators": true, |
| 7 | "dynamicImport": true |
| 8 | }, |
| 9 | "transform": { |
| 10 | "react": { |
| 11 | "runtime": "automatic", |
| 12 | "development": false |
| 13 | }, |
| 14 | "legacyDecorator": true, |
| 15 | "decoratorMetadata": true |
| 16 | }, |
| 17 | "target": "es2022", |
| 18 | "loose": false, |
| 19 | "externalHelpers": false |
| 20 | }, |
| 21 | "minify": true, |
| 22 | "sourceMaps": true |
| 23 | } |
SWC with Webpack
webpack.config.js
JavaScript
| 1 | // webpack.config.js — replace babel-loader with swc-loader |
| 2 | module.exports = { |
| 3 | module: { |
| 4 | rules: [ |
| 5 | { |
| 6 | test: /\.(ts|tsx|js|jsx)$/, |
| 7 | exclude: /node_modules/, |
| 8 | use: { |
| 9 | loader: "swc-loader", |
| 10 | options: { |
| 11 | jsc: { |
| 12 | parser: { syntax: "typescript", tsx: true }, |
| 13 | transform: { |
| 14 | react: { runtime: "automatic" }, |
| 15 | }, |
| 16 | }, |
| 17 | }, |
| 18 | }, |
| 19 | }, |
| 20 | ], |
| 21 | }, |
| 22 | }; |
SWC with Vite
vite.config.ts
TypeScript
| 1 | // vite.config.ts |
| 2 | import { defineConfig } from "vite"; |
| 3 | import swc from "vite-plugin-swc"; |
| 4 | |
| 5 | export default defineConfig({ |
| 6 | plugins: [ |
| 7 | swc({ |
| 8 | jsc: { |
| 9 | parser: { |
| 10 | syntax: "typescript", |
| 11 | tsx: true, |
| 12 | decorators: true, |
| 13 | }, |
| 14 | transform: { |
| 15 | react: { |
| 16 | runtime: "automatic", |
| 17 | }, |
| 18 | }, |
| 19 | }, |
| 20 | }), |
| 21 | ], |
| 22 | }); |
SWC vs Babel
| Aspect | SWC | Babel |
|---|---|---|
| Language | Rust | JavaScript |
| Speed | 20-70x faster | Baseline |
| Plugin ecosystem | Growing (Rust-based) | Massive (JS-based) |
| Configuration | Simpler (.swcrc) | Complex (presets + plugins) |
| Used by | Next.js, Vite, Parcel | Create React App, many legacy |
✓
best practice
Use SWC for new projects. It's faster, simpler, and is the default in Next.js and Vite. Only use Babel if you need a specific Babel plugin that has no SWC equivalent.
$Blueprint — Engineering Documentation·Section ID: BT-SWC-01·Revision: 1.0