SWC: Compiler JavaScript Super Cepat Berbasis Rust yang Wajib Kamu Coba

Pernah nunggu build project JavaScript/TypeScript berjam-jam? Babel memang andalan, tapi makin besar projectnya, makin lambat juga build time-nya. Tenang, ada solusinya: SWC (Speedy Web Compiler) — compiler berbasis Rust yang janji 20x lebih cepat dari Babel.

Apa itu SWC, kenapa lagi naik daun, dan gimana cara pakainya? Yuk kita bahas!

Daftar Isi

1. Apa Itu SWC?
2. Kenapa Rust?
3. SWC vs Babel: Perbandingan
4. Cara Install & Pakai SWC
5. Integrasi dengan Framework Populer
6. SWC di Ekosistem Lebih Besar
7. Kesimpulan

---

Apa Itu SWC?

SWC (Speedy Web Compiler) adalah compiler TypeScript dan JavaScript yang ditulis sepenuhnya dalam Rust. SWC bisa dipakai buat:

Fungsi	Deskripsi	Contoh
Transpilasi	Ubah JS modern / TypeScript → JS kompatibel browser	const → var, JSX → JS biasa
Minifikasi	Kecilkan ukuran file produksi	Hapus spasi, rename variabel
Bundling	Gabung banyak file jadi satu	swcpack (eksperimental)

Yang bikin SWC unik: dia bukan cuma replacement Babel, tapi ditulis dari awal dengan fokus kecepatan maksimal. Bedanya dengan compiler tradisional yang udah kita bahas di artikel sebelumnya, SWC menggunakan pendekatan kompilasi native yang jauh lebih efisien.

Kenapa Rust?

Ini pertanyaan kunci. Kenapa SWC pake Rust, bukan JavaScript? Jawabannya: Rust dikompilasi ke kode mesin (machine code), bukan diinterpretasi.

Gambaran sederhananya:

Aspek	Compiler di JavaScript (Babel)	Compiler di Rust (SWC)
Bahasa penulisan	JavaScript	Rust
Eksekusi	Diinterpretasi Node.js	Kode mesin native
Kecepatan parsing	~200 MB/s	~1.5 GB/s
Startup time	100-400ms	< 10ms

Babel itu ditulis di JavaScript, jadi compiler-nya sendiri butuh di-compile dulu sama Node.js tiap kali jalan. SWC udah dalam bentuk binary native — langsung jalan tanpa interpretasi. Ini PRD-nya: SWC bisa 20x lebih cepat dari Babel.

Konsep compiler vs interpreter ini bisa kamu pelajari lebih detail di artikel Kode ke Eksekusi: Compiler vs Interpreter vs JIT.

SWC vs Babel: Perbandingan

Aspek	SWC	Babel
Bahasa	Rust	JavaScript
Kecepatan ⚡	20x lebih cepat	Standar
Plugin ecosystem	Terbatas (tapi berkembang)	Sangat luas
TypeScript support	✅ Native (built-in)	❌ Per plugin tambahan
Minifier bawaan	✅ Ada (swc/minify)	❌ Butuh plugin (tersedianan)
Konfigurasi	File .swcrc atau package.json	File babel.config.js
Integrasi Next.js	✅ Default sejak v12	❌ Diganti SWC

SWC unggul di kecepatan dan kesederhanaan — terutama untuk TypeScript yang di-support langsung tanpa ribet install plugin. Babel masih unggul di plugin ecosystem yang udah mature.

Kalau kamu baru mulai belajar programming, pahami dulu tipe data dan variabel sebelum masuk ke build tools.

Cara Install & Pakai SWC

1. Install via npm

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

Atau pake yarn:

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

2. Konfigurasi .swcrc

Buat file .swcrc di root project:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "target": "es2020",
    "minify": {
      "compress": true,
      "mangle": true
    }
  },
  "module": {
    "type": "commonjs"
  },
  "minify": true
}

3. Jalankan

npx swc src -d dist

Perintah di atas bakal compile semua file dari src/ ke dist/ dengan konfigurasi yang udah kamu set. Simpel banget!

4. Sped dengan @swc/jest

Kalo kamu pake Jest untuk testing:

npm install --save-dev @swc/jest

Terus update jest.config.js:

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': '@swc/jest',
  },
};

Testing jadi 10x lebih cepat dibanding pake ts-jest. Cocok buat project besar dengan ribuan test case — topik yang bakal kita bahas lebih lanjut soal testing dan TDD di seri ini.

Integrasi dengan Framework Populer

Next.js

Sejak Next.js v12, SWC jadi default compiler. Kamu nggak perlu konfigurasi apa-apa — pas npm run dev atau npm run build, Next.js udah pake SWC di belakang layar. Ini alasan kenapa Next.js v12 ke atas terasa lebih cepat dibanding v11.

Parcel

Parcel v2 juga udah pake SWC sebagai default transpiler. Bundle jadi lebih cepet tanpa konfigurasi tambahan.

Vite

Vite pake SWC lewat plugin @vitejs/plugin-react-swc:

npm install --save-dev @vitejs/plugin-react-swc

// vite.config.js
import react from '@vitejs/plugin-react-swc'

export default {
  plugins: [react()],
}

SWC di Ekosistem Lebih Besar

SWC bukan cuma compiler standalone — dia jadi fondasi buat banyak tools modern:

1. Next.js — Build-in, nggak perlu install apa-apa
2. Deno — Pake SWC buat transpilasi internal
3. Rome — Tools unification (format, lint, bundle) juga pake Rust
4. ESBuild — Mirip SWC, juga Rust-based build tool (tapi beda tim dan approach)

Buat kamu yang kerja di project besar atau sering build ulang berkali-kali, migrasi ke SWC bisa nghemat waktu menit per hari. Dikalikan setahun, itu jam-jam yang hilang sia-sia.

Masalah developer experience kayak gini penting banget di dunia programming modern. Kalau kamu penasaran soal tools yang bikin kerja developer makin efisien, cek juga artikel tentang knowledge graph untuk codebase yang ngebahas cara visualisasi kode kompleks.

Kesimpulan

Aspek	Intinya
Apa itu SWC	Compiler Rust untuk JavaScript/TypeScript yang super cepat
Keunggulan	20x lebih cepat dari Babel, native Rust binary
Cocok untuk	Project besar, TypeScript, Next.js, CI/CD pipeline
Kapan pake Babel	Butuh plugin kustom / ecosystem mature
Cara mulai	npm i @swc/core @swc/cli + buat .swcrc

SWC adalah contoh sempurna kenapa Rust makin dominan di dunia web development — performa native tanpa kompromi kemudahan. Dimulai dari kebutuhan sederhana (compiler yang lebih cepat), sekarang SWC udah jadi fondasi utama tools kayak Next.js, Parcel, dan Vite.

Kalau kamu belum familiar dengan Rust atau pengen belajar lebih lanjut tentang compiler, mulai dari artikel dasar programming dulu, lalu lanjut ke seri compiler vs interpreter kita. Atau langsung aja cobain SWC di project Next.js kamu — nggak perlu setup apa-apa selain npm run dev.

---

Related Posts

• Kode ke Eksekusi: Compiler vs Interpreter vs JIT — Pahami perbedaan compiler, interpreter, dan JIT
• Knowledge Graph untuk Code: Cara Baru Memahami Codebase Raksasa — Tools visualisasi kode yang lagi tren
• AI Agents: Revolusi Coding yang Nggak Bisa Kamu Abaikan — Tools AI yang bantu developer lebih produktif

---