Webpack → Vite: Kisah Migrasi Bundler
(engineering.ab180.co)Saya ingin berbagi cerita saat memindahkan Webpack, yang telah kami gunakan selama 5 tahun setelah layanan dirilis, ke Vite. Masih banyak kekurangan, tetapi saya akan berterima kasih jika Anda membacanya dengan santai.
Kelebihan Webpack dan perubahan ekosistem web
Webpack telah dikembangkan dan dikelola selama 10 tahun terakhir, sehingga ekosistemnya sangat matang.
Digunakan di banyak tempat seperti Create React App, dan mendukung berbagai browser dengan menggabungkan modul dalam format IIFE.
Namun, selama 5 tahun, fitur dalam layanan meningkat hampir 3 kali lipat, sehingga waktu build bertambah dan pengalaman pengembangan memburuk. Selain itu, dengan berkembangnya ekosistem web, muncul berbagai perubahan seperti dukungan untuk ES Module.
Bundler + Native
Dalam 1–2 tahun terakhir, bundling dan transpiling dengan memanfaatkan kekuatan Native mulai mendapat perhatian. Berbagai upaya dilakukan untuk melampaui batas pemrosesan JS yang bersifat single-threaded.
Contoh yang representatif adalah esbuild berbasis Golang dan SWC berbasis Rust.
Percobaan pertama: bundling hanya dengan esbuild
Saat itu, dengan mempertimbangkan stabilitas, plugin, dan ekosistem, kami memutuskan menggunakan bundler yang berbasis esbuild. Kami juga ingin melihat seberapa jauh performa esbuild itu sendiri.
Setelah memasang paket dan menjalankan skrip build, build yang sebelumnya memakan waktu sekitar 210 detik selesai hanya dalam 2,16 detik. Ini menunjukkan kecepatan build sekitar 100 kali lebih cepat.
Namun, saat Babel diterapkan untuk menggunakan EmotionJS, performanya menjadi 10 kali lebih lambat.
Selain itu, karena esbuild tidak mendukung HMR, kami menilai penggunaannya akan sulit. Kami sebenarnya bisa mengimplementasikan HMR sendiri, tetapi kami merasa biaya tenaga, pemeliharaan, dan pengelolaannya akan sangat besar.
Percobaan kedua: bundling dengan Vite
Konsep Vite adalah memisahkan Dependencies dan Source code.
Dependencies tidak berubah setelah diinstal, sehingga ditranspilasi terlebih dahulu dengan esbuild. Source code sering berubah, sehingga dimuat sebagai ESM. Hasil build di-cache agar build pengembangan bisa berlangsung cepat.
Migrasi dapat dilakukan dengan mudah menggunakan template yang disediakan Vite. Ada beberapa isu, tetapi semuanya cepat terselesaikan, dan kami bisa membuat konfigurasi yang jauh lebih singkat dan ringkas dibanding Webpack.
Hasil migrasi bundler
Saat mengukur waktu build di Netlify, rata-ratanya turun dari 250 detik → 90 detik. Berkurang menjadi sekitar 36% dari sebelumnya.
Seiring file konfigurasi menjadi lebih ringkas, anggota tim dapat dengan mudah membuat lingkungan build kustom yang memanfaatkannya, sehingga efisiensi meningkat.
Untuk peningkatan yang lebih baik, kami bisa mengganti ke library CSS-in-JS yang tidak bergantung pada Babel dan mencoba menerapkan Monorepo.
Dari sisi ekosistem, jika SWC menjadi stabil, Babel kemungkinan bisa digantikan, dan TypeScript Type Checker juga sedang di-porting ke Native.
Pelajaran
- Pekerjaan yang terlihat besar pun bisa diselesaikan dengan mudah jika dipecah menjadi bagian-bagian kecil untuk diuji dan banyak didiskusikan.
- Bahkan alat yang sekarang digunakan secara luas bisa cepat menghilang seiring perkembangan ekosistem.
- Aksesibilitas yang baik menciptakan lingkungan yang baik.
3 komentar
Kecepatan esbuild benar-benar mengejutkan.
Awalnya saya agak ragu ketika melihat bahkan di halaman utama esbuild mereka menonjolkan klaim bahwa performanya 10-100x lebih cepat, tetapi setelah melihatnya langsung, hasilnya benar-benar mengejutkan!
Saya juga sangat menantikan era seperti itu datang! Rasanya pengembangan akan jadi jauh lebih menyenangkan :)