このページは Cloud Translation API によって翻訳されました。

コード分割で JavaScript ペイロードを削減

Houssein Djirdeh

Jeremy Wagner

誰も待つのは好きではありません。 読み込みに 3 秒以上かかると、50% を超えるユーザーがウェブサイトから離脱します。

大きな JavaScript ペイロードを送信すると、サイトの速度に大きな影響を与えます。アプリケーションの最初のページが読み込まれたらすぐにすべての JavaScript をユーザーに送信するのではなく、バンドルを複数の部分に分割し、最初に必要なものだけを送信します。

コード分割が有益な理由

コード分割は、起動時間を最小限に抑えるための手法です。起動時に JavaScript を送信する量を減らすと、この重要な期間中のメインスレッドの作業を最小限に抑え、アプリケーションのインタラクティブ性を向上させることができます。

Core Web Vitals の場合、起動時にダウンロードされる JavaScript ペイロードを減らすと、Interaction to Next Paint（INP）時間が短縮されます。理由は、メインスレッドを解放することで、JavaScript の解析、コンパイル、実行に関連する起動コストを削減し、ユーザー入力に迅速に応答できるためです。

ウェブサイトのアーキテクチャによっては、特にウェブサイトがクライアントサイドレンダリングに大きく依存している場合は、マークアップのレンダリングに関連する JavaScript ペイロードのサイズを小さくすることで、Largest Contentful Paint（LCP）時間が短縮される可能性があります。これは、クライアントサイドマークアップの完了後に LCP リソースがブラウザによって検出されるまでに時間がかかる場合や、メインスレッドが忙しすぎてその LCP 要素をレンダリングできない場合に発生することがあります。どちらのシナリオでも、ページの LCP 時間が遅れる可能性があります。

測定

ページ上のすべての JavaScript の実行にかなりの時間がかかる場合は、Lighthouse で監査が失敗したことが示されます。

スクリプトの実行に時間がかかりすぎることを示す、失敗した Lighthouse 監査。

JavaScript バンドルを分割して、ユーザーがアプリを読み込むときに初期ルートに必要なコードのみを送信します。これにより、解析とコンパイルに必要なスクリプトの量が最小限に抑えられ、ページの読み込み時間が短縮されます。

webpack、Parcel、Rollup などの一般的なモジュールバンドラでは、動的インポートを使用してバンドルを分割できます。たとえば、次のコードスニペットは、フォームの送信時に呼び出される someFunction メソッドの例を示しています。

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

ここで、someFunction は特定のライブラリからインポートされたモジュールを使用します。このモジュールが他の場所で使用されていない場合は、コードブロックを変更して、動的インポートを使用して、ユーザーがフォームを送信したときにのみ取得するようにします。

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

モジュールを構成するコードは初期バンドルに含まれず、遅延読み込みされます。つまり、フォーム送信後に必要になった場合にのみユーザーに提供されます。ページのパフォーマンスをさらに改善するには、重要なチャンクをプリロードして優先度を付けてより早く取得します。

上のコードスニペットは単純な例ですが、サードパーティの依存関係を遅延読み込みすることは、大規模なアプリケーションでは一般的なパターンではありません。通常、サードパーティの依存関係は、頻繁に更新されないため、キャッシュに保存できる別のベンダーバンドルに分割されます。SplitChunksPlugin がどのように役立つかについては、こちらをご覧ください。

クライアントサイドフレームワークを使用する場合は、ルートまたはコンポーネントレベルで分割するのが、アプリケーションのさまざまな部分を遅延読み込みする簡単な方法です。webpack を使用する一般的なフレームワークの多くは、構成に直接関与するよりも簡単に遅延読み込みを実現できる抽象化を提供しています。