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

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

Houssein Djirdeh

Jeremy Wagner

待つのは好きじゃないよ。 50% 以上のユーザーが、ウェブサイトの読み込みにかかる時間が 3 秒を超えるとその閲覧をやめてしまいます。

サイズの大きな JavaScript ペイロードを送信すると、サイトの速度に影響します大幅に低下しましたできるだけ早くユーザーにすべての JavaScript を渡さなくても、アプリケーションの最初のページが読み込まれると、バンドルを最初に必要なものだけを送信するようにします

コード分割が有益である理由

コード分割は、起動時間を最小限に抑えるための手法です。起動時の JavaScript を減らすと、この重要な時期にメインスレッドの処理を最小限に抑えることで、アプリケーションのインタラクティブ速度が上がります。

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

ウェブサイトのアーキテクチャによっては（特に、ウェブサイトがクライアント側のレンダリングに大きく依存している場合）、マークアップのレンダリングを担当する JavaScript ペイロードのサイズを小さくすると、Largest Contentful Paint（LCP）の時間が改善する可能性があります。これは、クライアントサイドのマークアップが完了するまでブラウザで LCP リソースが検出されるのに遅延している場合、またはメインスレッドがビジー状態でその LCP 要素をレンダリングできない場合に発生します。どちらの場合も、ページの LCP 時間が長くなる可能性があります。

測定

実装にかなりの時間がかかると、Lighthouse では不合格となった監査が表示されます。ページのすべての JavaScript を実行できます。

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

JavaScript バンドルを分割し、ユーザーがアプリケーションを読み込みます。これにより、作成する必要があるスクリプトの量をコンパイルされるため、ページの読み込み時間を短縮できます。

一般的なモジュールバンドラ（webpack、 Parcel ロールアップを使用すると、動的インポートを使用したバンドル例として、以下のコードスニペットについて考えてみましょう。フォームの送信時に呼び出される 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 を使用する一般的なフレームワークでは、遅延読み込みを行う抽象化が提供されます。自分で構成に取り組むよりも簡単です。