Cara 1Password Memangkas Waktu Build Ekstensi Browser hingga 90% dengan esbuild

• Pada awal pengembangan, waktu build sekitar 30 detik dan masih cukup baik, tetapi seiring bertambahnya fitur, waktu build meningkat hingga 1 menit 10 detik
• Waktu build yang panjang memperlambat proses pengembangan, menambah waktu onboarding developer baru, dan membuat sulit untuk tetap fokus dalam pekerjaan sehari-hari

Upaya perbaikan melalui hackathon

• Pada bulan Januari, tim mengumpulkan data, menulis proposal proyek hackathon, memperdalam pemahaman terhadap sistem build yang ada, dan mencari cara untuk melakukan profiling
• Seluruh proses build diprofilkan menggunakan OpenTelemetry dan Jaeger
  • Hasil profiling menunjukkan bahwa eksekusi Webpack/Rollup memakan sebagian besar waktu build
  • Ditemukan banyak peluang untuk pemrosesan paralel karena dependensi-dependensi kecil dibangun satu per satu
  • Juga ditemukan bahwa pada tahap awal, beberapa pekerjaan yang intensif berjalan lebih lama dari yang diperlukan dan menunda sisa proses build
• Selama periode hackathon, fokus diarahkan pada pemangkasan waktu bundling dengan memanfaatkan esbuild
  • Menggunakan esbuild sebagai loader untuk Webpack/Rollup memberikan peningkatan performa yang besar (untuk Rollup, berkurang 80%)
  • Menggunakan esbuild sebagai bundler yang sepenuhnya menggantikan Webpack/Rollup memangkas waktu bundling hingga 90%
• Hasil proyek hackathon ini berhasil memangkas waktu build ekstensi lebih dari 70%, menjadi sekitar 15 detik

Pekerjaan untuk penerapan ke production

• Karena proyek hackathon banyak memakai solusi sementara, penerapan ke production memerlukan penggantian dengan solusi yang benar-benar siap pakai
  • Sepenuhnya beralih dari Webpack dan Rollup ke esbuild
  • Menyatukan proses build ke satu lokasi
  • Menyelesaikan masalah pemrosesan aset grafis
  • Menambahkan kembali pemeriksaan tipe TypeScript ke dalam proses build
  • Menguji build production serta membandingkan ukuran dan fungsinya
  • Mencerminkan perubahan pada dependensi internal
  • Mereproduksi aspek lain dari sistem build sebelumnya, seperti tahap build Sentry
  • Menambahkan penanganan untuk browser non-Chrome, polyfill, dan kebutuhan build spesifik tiap store
• Pekerjaan difokuskan terutama pada pemeriksaan tipe dan optimalisasi ukuran bundle

Menambahkan pemeriksaan tipe ke esbuild

• Karena tsc lambat, sulit menggunakannya bersama proses build cepat dari esbuild
• Tim menggunakan plugin komunitas esbuild-plugin-typecheck untuk menjalankan tsc di worker thread dan memanfaatkan incremental compilation
• Tim juga mengimplementasikan plugin pemeriksaan tipe sederhana buatan sendiri untuk menjalankan proses CLI tsc secara paralel pada setiap root package
  • Pesan diagnostik kompilasi tsc diubah ke format native esbuild agar lebih mudah dibaca
  • Dengan memanfaatkan flag tsc --listFilesOnly dan Metafile dari esbuild, tim dapat memverifikasi secara otomatis bahwa semua input build sudah diperiksa tipenya

Peningkatan ukuran bundle production

• Bundle production dianalisis menggunakan penganalisis ukuran bundle milik esbuild
  • Ditemukan masalah bahwa build ESM dan CJS dari library komponen UI sama-sama ikut dimasukkan ke dalam bundle
  • Konfigurasi yang salah pada library internal diperbaiki sehingga ukuran bundle menyusut (3.3MB -> 2.1MB)
  • Efek pengurangan ukuran file juga terlihat di beberapa entry point

Dampak dan kesimpulan

• Hasil implementasi production menunjukkan waktu warm build berkurang lebih dari 90%, menjadi sekitar 5 detik
• Dalam mode watch, perubahan pada file TypeScript dapat di-rebuild dalam waktu kurang dari 1 detik
• Para developer memberikan umpan balik bahwa efisiensi kerja mereka meningkat pesat berkat sistem build baru
• Berkat upaya tim QA dan para developer volunteer, transisi ke sistem build baru berjalan lancar
• Hasil survei kepuasan developer menunjukkan ketidakpuasan terhadap waktu build turun drastis dari 97% menjadi 5%
• esbuild adalah alat yang sangat baik, dan proyek hackathon adalah wadah yang sangat cocok untuk pekerjaan seperti ini