bundle-splitting
アプリケーションのJavaScriptバンドルが大きくFCP/LCPなどのロード時間に影響している場合に使用します。バンドル分割の各種テクニックを学び、パフォーマンス最適化を効率的に進めるためのスキルです。
description の原文を見る
Teaches bundle splitting techniques for web performance. Use when your application has a large JavaScript bundle that affects load times or when you need to reduce FCP/LCP.
SKILL.md 本文
バンドル分割
モダンな Web アプリケーションを構築する際、Webpack や Rollup などのバンドラーは、アプリケーションのソースコードを取得し、1 つ以上のバンドルにまとめます。ユーザーが Web サイトにアクセスすると、バンドルがリクエストされ、ロードされて、ユーザーの画面にデータが表示されます。
V8 などの JavaScript エンジンは、ユーザーがリクエストしたデータをロード中に解析してコンパイルすることができます。モダンブラウザはコードをできるだけ高速で効率的に解析およびコンパイルするように進化していますが、開発者はプロセス内の 2 つのステップを最適化する責任があります。それはリクエストされたデータのロード時間と実行時間です。メインスレッドのブロッキングを防ぐため、実行時間をできるだけ短く保つようにしましょう。
使用時期
- アプリケーションにロード時間に影響する大きな JavaScript バンドルがある場合に使用してください
- First Contentful Paint (FCP) と Largest Contentful Paint (LCP) を削減したい場合に役立ちます
- コードの一部が特定のユーザーインタラクションまたはルートにのみ必要な場合に使用してください
手順
- Webpack や Rollup などのバンドラーを使用してコードを複数の小さなバンドルに分割してください
- 初期レンダリングに不要なコードを独自のバンドルに分離してください
- Time To Interactive (TTI) への影響を考慮し、クリティカルなレンダリングコードを優先してください
詳細
モダンブラウザは到着時にバンドルをストリーミングできるようになっていますが、それでもユーザーのデバイスに最初のピクセルが描画されるまでには相当な時間がかかることがあります。バンドルが大きいほど、エンジンが最初のレンダリング呼び出しが行われた行に到達するまでに時間がかかります。その間、ユーザーは白い画面を見つめなければなりません。
できるだけ早くユーザーにデータを表示したいと考えています。バンドルが大きいほど、ロード時間、処理時間、実行時間が増加します。バンドルのサイズを削減して速度を上げることができたら素晴らしいですね。
不要なコードを含む 1 つの巨大なバンドルをリクエストする代わりに、バンドルを複数の小さなバンドルに分割することができます。
アプリケーションをバンドル分割することで、バンドルのロード、処理、実行にかかる時間を削減できます。ロード時間と実行時間を削減することで、ユーザーの画面に最初のコンテンツが描画されるまでの時間である First Contentful Paint (FCP) と、最大のコンポーネントがスクリーンにレンダリングされるまでの時間である Largest Contentful Paint (LCP) を削減できます。
画面にデータを見ることができるのは素晴らしいことですが、単にコンテンツを「見る」だけではなく、完全に機能するアプリケーションにするため、ユーザーが「操作」できるようにしたいです。UI はバンドルがロードされ実行された後にのみインタラクティブになります。すべてのコンテンツが画面に描画され、インタラクティブになるまでの時間は、Time To Interactive (TTI) と呼ばれます。
バンドルが大きいからといって、必ずしも実行時間が長くなるわけではありません。ユーザーが使用しないコードをたくさんロードしてしまう可能性があります。バンドルの一部は特定のユーザーインタラクションでのみ実行される可能性があり、ユーザーはそれを行う場合と行わない場合があります。
エンジンは、ユーザーが画面に何か見える前に、初期レンダリングで使用されないコードもロード、解析、コンパイルしなければなりません。ブラウザがこれら 2 つのステップを効率的に処理するため、解析とコンパイルのコストはほぼ無視できますが、必要以上に大きなバンドルを取得することはアプリケーションのパフォーマンスに悪影響を与える可能性があります。低スペックデバイスや低速ネットワークを使用しているユーザーは、バンドルが取得されるまでのロード時間が大幅に増加します。
現在のナビゲーションで優先度が高くない部分的なコードを初期段階でリクエストする代わりに、このコードを初期ページのレンダリングに必要なコードから分離することができます。
大きなバンドルをバンドル分割して main.bundle.js と emoji-picker.bundle.js の 2 つの小さなバンドルに分割することで、より少ないデータを取得することによって初期ロード時間を削減します。
ソース
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- patternsdev
- リポジトリ
- patternsdev/skills
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/patternsdev/skills / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。