esbuild

#references #programming #javascript #typescript #performance

esbuild adalah bundler dan minifier JavaScript berperforma tinggi yang ditulis dalam Go. Alat ini menangani JavaScript, TypeScript, JSX, TSX, dan CSS secara bawaan, serta menyediakan antarmuka melalui CLI, JavaScript, dan Go. Kode sumbernya tersedia di GitHub dengan lisensi MIT.

Fungsi utama

Dalam satu alur kerja, esbuild dapat menelusuri dependensi, menggabungkan modul ESM dan CommonJS, menurunkan sintaks modern sesuai target, melakukan tree shaking, meminifikasi kode, dan menghasilkan source map. Dukungan TypeScript berfokus pada transformasi sintaks menjadi JavaScript. esbuild membuang anotasi tipe, tetapi tidak melakukan pemeriksaan tipe, sehingga proyek tetap perlu menjalankan tsc --noEmit secara terpisah.

Konfigurasi dasarnya relatif ringkas. Pengguna dapat menjalankan esbuild melalui CLI atau memakai API JavaScript untuk kebutuhan seperti build, transform, watch, serve, dan integrasi plugin. Sifat ini membuat esbuild berguna sebagai alat mandiri untuk alur build sederhana, sekaligus sebagai komponen dasar di dalam perangkat pengembangan lain.

npx esbuild src/index.tsx \
  --bundle \
  --minify \
  --sourcemap \
  --target=es2020 \
  --outfile=dist/app.js

Perintah tersebut mengambil satu titik masuk, menelusuri dependensinya, lalu menghasilkan satu berkas JavaScript yang sudah dibundel dan diminifikasi. Opsi target mengatur sintaks keluaran, bukan pemeriksaan kompatibilitas seluruh API platform yang digunakan aplikasi.

Mengapa esbuild cepat

Menurut FAQ resmi esbuild, kecepatannya bukan hanya hasil pemilihan Go. Program dikompilasi menjadi kode native sehingga tidak menanggung biaya awal pemuatan dan optimasi JIT seperti aplikasi CLI berbasis JavaScript. Implementasinya juga menggunakan paralelisme secara intensif: parsing dan pembuatan kode dapat berjalan di banyak inti CPU, sedangkan tahap linking sebagian besar tetap bersifat serial.

Dokumentasi arsitektur esbuild menjelaskan bahwa implementasinya membatasi pekerjaan berulang dan hanya melakukan sedikit lintasan penuh terhadap AST. Parsing, pembentukan lingkup, pengikatan simbol, transformasi sintaks, minifikasi, pencetakan kode, dan pembuatan source map digabungkan ke dalam tiga lintasan utama. Struktur data yang konsisten, penggunaan memori bersama, dan sedikitnya konversi antarrepresentasi membantu menjaga lokalitas cache CPU.

Proses bundling memiliki dua tahap besar: pemindaian dan kompilasi. Tahap pemindaian membangun graf dependensi dengan memproses berkas pada goroutine terpisah. Tahap kompilasi melakukan linking, tree shaking, pembagian chunk bila diaktifkan, serta pembuatan keluaran. Pada mode inkremental, hasil pemrosesan berkas yang tidak berubah dapat digunakan kembali agar pembangunan berikutnya tidak mengulang seluruh pekerjaan.

Kinerja dan cara membaca benchmark

Benchmark resmi esbuild mengukur pembangunan produksi sepuluh salinan pustaka three.js dari awal, tanpa cache, dengan minifikasi dan source map. Pada perangkat uji yang disebutkan dokumentasi, esbuild menyelesaikannya dalam 0,39 detik. Parcel 2 memerlukan 14,91 detik, Rollup 4 dengan Terser 34,10 detik, dan webpack 5 41,21 detik. Benchmark TypeScript berbasis kode lama Rome mencatat 0,10 detik untuk esbuild, 6,91 detik untuk Parcel 2, dan 16,69 detik untuk webpack 5.

Angka tersebut menunjukkan karakteristik desain esbuild, tetapi bukan jaminan untuk setiap proyek. Hasilnya berasal dari benchmark yang disusun pengembang esbuild dengan perangkat keras, opsi, dan beban kerja tertentu. Video "What Is ESBuild?" juga menyarankan pengujian pada proyek sendiri. Pembicaranya melaporkan pengalaman penggunaan produksi yang konsisten cepat dan menjadikan kecepatan sebagai alasan utama memilih esbuild.

Posisi dalam alur pengembangan

esbuild cocok ketika waktu build dan umpan balik pengembangan menjadi prioritas, terutama untuk transformasi TypeScript atau JSX, bundling aplikasi Node.js, minifikasi, dan alat internal dengan konfigurasi terbatas. API yang sederhana juga memudahkan tim menyusun skrip build sendiri atau menggunakan esbuild sebagai mesin transformasi di balik alat yang lebih lengkap.

Untuk TypeScript, pembagian tanggung jawab perlu dibuat jelas. esbuild menangani transpilasi dengan cepat, sedangkan tsc, editor, atau layanan CI menangani validasi tipe. Dokumentasi tipe konten esbuild menyebutkan bahwa opsi TypeScript yang membutuhkan informasi sistem tipe, termasuk emitDecoratorMetadata dan pembuatan deklarasi .d.ts, tidak didukung langsung.

Batasan yang disengaja

Ruang lingkup esbuild sengaja tidak mencakup semua kebutuhan frontend. Pengembangnya tidak merencanakan pemeriksaan tipe TypeScript, manipulasi AST khusus, hot-module reloading, module federation, atau dukungan inti untuk bahasa kerangka seperti Vue, Svelte, Angular, dan Elm. Kebutuhan tersebut dapat ditangani oleh alat lain atau plugin, tetapi API plugin esbuild tidak mengekspos setiap bagian internal dan tidak dimaksudkan untuk meniru fleksibilitas penuh webpack.

Dukungan code splitting tersedia melalui opsi --splitting, tetapi dokumentasi proyek masih menyebut implementasinya relatif sederhana. esbuild juga belum mencapai versi 1.0 dan diposisikan oleh pengembangnya sebagai beta tahap akhir, walaupun API-nya sudah digunakan oleh sejumlah alat dan proyek lain.

Server pengembangan bawaan hanya ditujukan untuk pengembangan, bukan produksi. esbuild juga bukan sandbox: berkas proyek, dependensi, perintah build, dan plugin dianggap sebagai input tepercaya. Pembatasan sumber daya atau isolasi terhadap input yang tidak dipercaya harus diterapkan di luar proses esbuild.

Ringkasan video

Video "What Is ESBuild?" memperkenalkan esbuild sebagai alat untuk membundel, meminifikasi, dan mengubah JavaScript modern, TypeScript, JSX, serta TSX menjadi keluaran yang dapat dijalankan pada browser atau Node.js. Penjelasannya berpusat pada pengalaman praktis: esbuild dapat dipakai langsung melalui CLI atau API, tetapi banyak pengembang akan menjumpainya sebagai komponen di dalam alat lain. Video tersebut mengaitkan kecepatannya dengan implementasi Go yang dikompilasi menjadi kode native, pemakaian paralelisme, implementasi internal yang ditulis dari awal, dan pengelolaan memori yang efisien.

esbuild menukar sebagian keluasan fitur dan fleksibilitas konfigurasi dengan arsitektur yang sempit, API yang sederhana, dan waktu build yang sangat singkat. Pilihan ini paling masuk akal ketika kebutuhan proyek sesuai dengan ruang lingkupnya. Untuk alur frontend yang membutuhkan pemeriksaan tipe, HMR, transformasi kerangka, atau ekosistem plugin yang luas, esbuild lebih tepat dijadikan salah satu komponen daripada satu-satunya alat build.

Lihat juga

Sumber

Enter your search text in the box above

Select a result to preview