Skip to content
概要 ブログ 学習する 探検 パターン Case studies
このページ内
  • 測定

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

Nov 5, 2018
Available in: English、Español、Português、Русский、中文、한국어
Appears in: 読み込み時間の高速化
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
このページ内
  • 測定

誰でも待ち時間は減らしたいものです。読み込みに3秒以上かかると、ユーザーの50%以上がそのWebサイトを諦めます。

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

測定 #

ページ上のすべての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を使用する多くの一般的なフレームワークは抽象化を提供しており、自分で構成を行うよりも遅延読み込みが簡単になります。

パフォーマンス
最終更新: Nov 5, 2018 — 記事を改善する
Codelabs

See it in action

Learn more and put this guide into action.

  • Reduce JavaScript payloads with code splitting
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.