Frontend Academy · Pelajaran

esbuild: Kecepatan dan Keterbatasan

Gunakan esbuild sebagai bundler mandiri dan pahami mengapa kecepatannya jauh lebih tinggi daripada webpack, beserta keterbatasannya saat ini terkait plugin dan tipe.

esbuild: Kecepatan dan Keterbatasan adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu esbuild?

esbuild adalah pembundel dan peminifikasi yang ditulis dalam Go. Kecepatannya 10–100 kali lebih tinggi daripada pembundel berbasis JavaScript karena multithreading native dan tidak adanya beban awal saat memulai. Dibuat oleh Evan Wallace (Figma).

Tolok Ukur Kecepatan

Membundel sumber React (sekitar 6 MB): esbuild ~0,4 detik, Webpack ~9 detik, Rollup ~6 detik, Parcel ~10 detik. Kecepatan ini berasal dari: Go (dikompilasi), paralelisme, tidak ada konversi AST antar-tahap, dan arsitektur sederhana.

Menggunakan esbuild Secara Langsung

Instal dan jalankan dari CLI.

npm install -D esbuild

npx esbuild src/app.ts \
  --bundle \
  --outfile=dist/app.js \
  --minify \
  --sourcemap \
  --target=es2020 \
  --platform=browser

API Pemrograman

Gunakan dari skrip build untuk mendapatkan kontrol lebih besar.

// build.js
import { build } from 'esbuild';

await build({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outfile: 'dist/app.js',
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  platform: 'browser',
  define: { 'process.env.NODE_ENV': '"production"' }
});

TypeScript Tanpa tsc

esbuild menghapus sintaks TypeScript (mengubah .ts menjadi .js) jauh lebih cepat daripada tsc. esbuild TIDAK melakukan pemeriksaan tipe — jalankan tsc --noEmit secara terpisah untuk itu.

# Strip types and bundle in one go:
npx esbuild src/index.ts --bundle --outfile=dist/index.js

# Type-check separately (slower, can run in parallel):
npx tsc --noEmit

Server Pengembangan dengan Muat Ulang Otomatis

esbuild memiliki server pengembangan bawaan dengan mode watch dan HMR melalui API konteks.

import { context } from 'esbuild';

const ctx = await context({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outdir: 'dist'
});

await ctx.watch();
await ctx.serve({ servedir: 'public', port: 8000 });

Arsitektur Pengaya

esbuild mendukung pengaya dengan dua kait utama: onResolve (mencegat resolusi modul) dan onLoad (menyediakan konten untuk modul yang telah di-resolve).

const myPlugin = {
  name: 'env',
  setup(build) {
    build.onResolve({ filter: /^env$/ }, () => ({ path: 'env', namespace: 'env-ns' }));
    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env),
      loader: 'json'
    }));
  }
};

Pemuat

esbuild memiliki pemuat bawaan untuk: js, ts, jsx, tsx, json, css, text, base64, dataurl, file, binary. Dukungan CSS hanya untuk pembundelan (tanpa modul dan tanpa PostCSS) — gunakan pengaya atau alat lain.

Keterbatasan dibandingkan Rollup/Vite

1) Ekosistem pengayanya lebih kecil. 2) Alur CSS sangat minimal — tidak ada CSS Modules, PostCSS, atau praprosesor bawaan. 3) Tidak ada HMR untuk framework (framework seperti React/Vue memerlukan HMR khusus framework). 4) Tidak ada peringatan atau analisis tree-shaking. 5) Kurang matang untuk pengaturan SSR yang kompleks.

Saat esbuild Unggul

1) Pembundelan pustaka (satu titik masuk, tanpa framework). 2) Pengemasan Lambda/Worker (cold start minimal). 3) Subalat di dalam Vite/tsup (digunakan untuk transformasi TS di balik layar). 4) Migrasi dari tsc ke alur TS yang lebih cepat.

esbuild di Dalam Alat Lain

Vite menggunakan esbuild untuk transformasi TS/JSX saat pengembangan dan prapembundelan node_modules. tsup menggunakan esbuild untuk pembundelan pustaka. Rollup memiliki pengaya esbuild. Banyak alat menggabungkan kecepatan esbuild dengan pengalaman pengguna mereka sendiri.

tsup — Pembungkus esbuild yang Ramah untuk Pustaka

Untuk menerbitkan pustaka npm, tsup membungkus esbuild dengan setelan bawaan yang masuk akal: menghasilkan CJS + ESM + .d.ts, memantau perubahan saat pengembangan, dan menerima konfigurasi sederhana.

# package.json
"scripts": { "build": "tsup src/index.ts --format esm,cjs --dts" }

Kompromi Ukuran Bundel

esbuild melakukan minifikasi dengan cepat, tetapi minifikasinya sedikit kurang agresif dibandingkan Terser. Jalankan Terser sebagai langkah pascaproses untuk mendapatkan keluaran sekecil mungkin, jika ukuran lebih penting daripada kecepatan build.

Pemeriksaan Singkat

esbuild dapat menggantikan tsc untuk mengompilasi TypeScript — tetapi apa yang tidak dilakukan esbuild, sedangkan tsc melakukannya?

Ringkasan: esbuild

Pembundel berbasis Go, 10–100 kali lebih cepat daripada pembundel JS. CLI + API pemrograman. Menghapus TS (tanpa pemeriksaan tipe — jalankan tsc --noEmit). Kait pengaya: onResolve + onLoad. Keterbatasan: ekosistem pengaya yang tipis, alur CSS minimal, dan tidak ada HMR framework. Terbaik untuk: pustaka, Lambda/Workers, serta penggunaan di dalam Vite/tsup. Gunakan pembungkus tsup untuk pustaka npm.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “esbuild: Kecepatan dan Keterbatasan” gratis?

Ya — teks lengkap “esbuild: Kecepatan dan Keterbatasan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “esbuild: Kecepatan dan Keterbatasan”?

Gunakan esbuild sebagai bundler mandiri dan pahami mengapa kecepatannya jauh lebih tinggi daripada webpack, beserta keterbatasannya saat ini terkait plugin dan tipe. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “esbuild: Kecepatan dan Keterbatasan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy