webpack

属性

背景

GitLab は 3 年間 webpack を使ってフロントエンドのアセットをバンドルしており、それにより素晴らしいことを実現できましたが、同時にその強み（例: コード分割やパフォーマンス改善）を十分に活用できていません。スケールに伴う問題（高いリソース消費、クラッシュ、デバッグツールの不具合等）に適切に対処してこなかったため、開発者の生産性を妨げる原因にもなっています。このワーキンググループは、フロントエンドビルドツールの最も深刻な問題を修正するとともに、webpack の活用されていない機能を使ったパフォーマンスと保守性のベストプラクティスを推進するようフロントエンド開発ガイドラインを再整備することを目指します。

ビジネス目標

フロントエンドビルドツールを修正・改善することでエンジニアの生産性を向上させ、パフォーマンスと保守性についてベストプラクティスが守られるようなガイドラインと自動化プロセスを整備します。

終了基準

• GitLab の開発環境を改善する。
  • webpack/sprockets のビルドプロセスを改善して GDK の Node プロセス全体のメモリ使用量を 30% 削減し、時間とともに無制限に増大しないよう消費量を追跡する仕組みを整備する。=> これまでに 22% 削減
• GitLab の全体的なフロントエンドパフォーマンスを改善する。
  • モダンブラウザとレガシーブラウザ（それぞれ <script type="module"> に対応しているものとしていないものとして定義）向けのターゲットビルドを実装し、各ターゲットに必要なコード変換とポリフィルのみを適用する。
  • コード分割のポリシーを文書化し、フロントエンドエンジニア向けのトレーニングワークショップをまとめて YouTube にアップロードする。
  • webpack の出力統計を活用してパフォーマンス改善を推進する
    • 追跡・監視すべき webpack 出力統計を決定する（エントリポイントのバンドルサイズ、エントリポイントの数、初期ページロードのコードカバレッジ、バンドル間の重複モジュール）
    • webpack 出力統計を追跡する仕組みを実装する（gitlab-ce!31537）
    • これらの指標の上限値と削減目標値を定める。
    • これらが増加した際に開発者に警告し、ベストプラクティスを強制する CI ジョブを整備する。

結論

この取り組みは現在 Manage:Foundations グループ が担当しています。

役割と責任

ページのソースコードを見る - ページの編集 - please contribute.