- 開発初期はビルド時間が30秒程度で問題なかったが、機能が増えるにつれて1分10秒まで伸びた
- 長いビルド時間は開発プロセスを遅くし、新しい開発者のオンボーディング時間を増やし、日常的な作業で集中しにくくしていた
ハッカソンによる改善の試み
- 1月にデータを収集し、ハッカソンのプロジェクト提案書を作成し、既存のビルドシステムへの理解を深め、プロファイリング方法を模索した
- OpenTelemetryとJaegerを活用してビルドプロセス全体をプロファイリングした
- プロファイリングの結果、Webpack/Rollupの実行がビルド時間の大部分を占めていることを確認
- 小さな依存関係が1つずつビルドされており、並列処理の余地が多いことを発見
- 初期の一部のホットな処理が必要以上に長くかかり、残りのビルドプロセスを遅らせていることを確認
- ハッカソン期間中はesbuildを活用してバンドル時間を短縮することに集中
- Webpack/Rollupのローダーとしてesbuildを使い、性能を大幅に改善（Rollupでは80%短縮）
- esbuildをWebpack/Rollupを完全に置き換えるバンドラーとして使い、バンドル時間を90%短縮
- ハッカソンプロジェクトの結果、拡張機能のビルド時間を70%以上短縮し、15秒レベルまで改善
本番適用のための作業
- ハッカソンプロジェクトではその場しのぎの対応が多く使われていたため、本番に適用するには実際のソリューションに置き換える必要があった
- WebpackとRollupの使用を完全にesbuildへ移行
- ビルドプロセスを1か所に統合
- グラフィックアセット処理の問題を解決
- TypeScriptの型チェックをビルドプロセスに再追加
- 本番ビルドのテストとサイズ・機能の比較
- 内部依存関係の変更を反映
- Sentryのビルド段階など、従来のビルドシステムの他の側面も再現
- Chrome以外のブラウザ、ポリフィル、ストアごとのビルド要件への対応を追加
- 型チェックとバンドルサイズ最適化を重視した作業を実施
esbuildに型チェックを追加
tscは遅いため、esbuildの高速なビルドプロセスと併用しにくいesbuild-plugin-typecheckコミュニティプラグインを使い、tscをworkerスレッドで実行して増分コンパイルを活用- 独自にシンプルな型チェックプラグインを実装し、各パッケージルートごとに並列で
tsc CLIプロセスを実行
tscのコンパイル診断メッセージをesbuildネイティブ形式に変換し、可読性を改善tsc --listFilesOnlyフラグとesbuildのMetafileを活用し、すべてのビルド入力が型チェックされているかを自動検証
本番バンドルサイズの改善
- esbuildのバンドルサイズアナライザーを活用して本番バンドルを分析
- UIコンポーネントライブラリのESMとCJSビルドの両方がバンドルに含まれている問題を発見
- 内部ライブラリの誤った設定を修正し、バンドルサイズを縮小（3.3MB -> 2.1MB）
- 複数のエントリーポイントにわたってファイルサイズ削減の効果を確認
影響と結論
- 本番実装の結果、ウォームビルド時間は90%以上短縮され、5秒レベルまで改善
- watchモードではTypeScriptファイル変更時に1秒以内でリビルド可能
- 開発者からは、新しいビルドシステムによって作業効率が大きく向上したとのフィードバックがあった
- QAチームと開発者ボランティアの努力により、新しいビルドシステムへの移行は円滑に進んだ
- 開発者満足度調査の結果、ビルド時間への不満は97%から5%へ大幅に減少
- esbuildは素晴らしいツールであり、ハッカソンプロジェクトはこの種の作業に最適
まだコメントはありません。