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

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

Houssein Djirdeh

ほとんどのウェブページとアプリケーションは、さまざまな要素で構成されています。以前のアプリケーションを構成するすべての JavaScript を、最初のページが読み込まれ、JavaScript が複数のチャンクに分割されます。ページのパフォーマンスが向上します

この Codelab では、コード分割を使用してコード分割のパフォーマンスを改善する方法を説明します。 3 つの数字を並べ替える簡単なアプリケーションです。

ブラウザウィンドウに、Magic Sorter というタイトルのアプリケーションが表示され、数値を入力するための 3 つのフィールドと並べ替えボタンが表示されています。

測定

いつものようにまずウェブサイトのパフォーマンスを測定することが最適化の追加を試みます。

サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。
Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
[ネットワーク] タブをクリックします。
[キャッシュを無効にする] チェックボックスをオンにします。
アプリを再読み込みします。

71.2 KB の JavaScript バンドルが表示されているネットワークパネル。

単純なアプリケーションで数個の数値を並べ替えるためだけに、71.2 KB 相当の JavaScript を使用しています。なぜでしょうか？

ソースコード（src/index.js）で、lodash ライブラリをインポートして使用します。使用します。Lodash には、多くの便利なユーティリティがあります。パッケージの 1 つのメソッドのみが使用されています。サードパーティの依存関係全体をインストールしてインポートする（よくある間違いです

最適化

バンドルサイズをカットする方法はいくつかあります。

サードパーティのライブラリをインポートするのではなく、カスタムの並べ替え方法を作成する
組み込みの Array.prototype.sort() メソッドを使用して数値で並べ替える
ライブラリ全体ではなく、lodash から sortBy メソッドのみをインポートします。
ユーザーがボタンをクリックしたときにのみ並べ替えるコードをダウンロードします

オプション 1 と 2 は、バンドルサイズ（および実際のアプリケーションにはおそらく最も理にかなっているでしょう）。これらはこのチュートリアルでは Roku を教えるために使用していません。

オプション 3 と 4 はどちらも、このアプリケーションのパフォーマンスの改善に役立ちます。「この Codelab の以降のセクションでは、これらのステップについて説明します。他のプログラミングと同様に必ずコードをコピーして貼り付けるのではなく、自分で記述するようにしてください。

必要なデータのみをインポート

lodash から 1 つのメソッドのみをインポートするように、いくつかのファイルを変更する必要があります。まず、package.json の次の依存関係を置き換えます。

"lodash": "^4.7.0",

これを次のように変更します。

"lodash.sortby": "^4.7.0",

src/index.js で、次のモジュールをインポートします。

import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";

さらに、値の並べ替え方法を更新します。

form.addEventListener("submit", e => {
  e.preventDefault();
  const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
  const sortedValues = _.sortBy(values);
  const sortedValues = sortBy(values);

  results.innerHTML = `
    <h2>
      ${sortedValues}
    </h2>
  `
});

アプリケーションを再読み込みし、DevTools を開いて [Network] パネルを確認します。もう一度クリックします。

15.2 KB の JavaScript バンドルが表示されているネットワークパネル。

このアプリケーションでは、バンドルサイズが 4 分の 1 以上、改善の余地はまだまだあります

コードの分割

webpack は、広く普及しているオープンソースソフトウェアのモジュールバンドラです。つまり、すべての JavaScript モジュール（その他のアセットなど）を静的ファイルに変換して、ブラウザで読み取ることはできません

このアプリケーションで使用される単一のバンドルは、2 つの別個のバンドルに分割できます。 chunks:

最初のルートを構成するコードを担当するのは
並べ替えコードを格納する第 2 のチャンク

動的インポートを使用すると、セカンダリチャンクを遅延読み込みできます。オンデマンドで読み込みますこのアプリケーションでは、チャンクを構成するコードをユーザーがボタンを押したときにのみ読み込まれます。

まず、src/index.js の並べ替えメソッドのトップレベルインポートを削除します。

import sortBy from "lodash.sortby";

ボタンが押されたときに起動するイベントリスナー内にインポートします。

form.addEventListener("submit", e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

import() 機能はプロポーザル（現在、。 Webpack にはすでにこのサポートが含まれており、記述されている構文と同じ構文に従います。プロポーザルによって除外されます

import() は Promise を返し、それが解決されると、選択された Promise の独立したチャンクに分割されます。モジュールを module.default を使用して、デフォルトのサービスアカウントをエクスポートしてください。Promise は、別の .then に連結されています。 sortInput メソッドを呼び出して 3 つの入力値を並べ替える。Deployment の Promise チェーン、.catch() は、Promise が拒否されたケースを処理するために使用されます。表示されます。

で確認できます。

注: 「bash Parsing error: 'import' and 'export' may only appear at the top level. 」という lint チェックエラーが表示されることがあります。これは、動的インポートの構文がまだ提案段階にあり、最終処理が完了していないためです。webpack はすでにサポートしていますが、Glitch が使用する ESLint（JavaScript lint チェックユーティリティ）の設定は更新されていませんが、まだ機能は動作しています。

最後に、sortInput メソッドを終わります。これは、次の値を返す関数を返す関数である必要があります。は、lodash.sortBy からインポートされたメソッドを取得します。このネスト関数では 3 つの入力値を並べ替えて DOM を更新します

const sortInput = () => {
  return (sortBy) => {
    const values = [
      input1.valueAsNumber,
      input2.valueAsNumber,
      input3.valueAsNumber
    ];
    const sortedValues = sortBy(values);

    results.innerHTML = `
      <h2>
        ${sortedValues}
      </h2>
    `
  };
}

モニタリング

最後にもう一度アプリケーションを再読み込みし、ネットワークを注視します。パネルを閉じますアプリがダウンロードされるとすぐに、小さな初期バンドルのみがダウンロードされる表示されます。

2.7 KB の JavaScript バンドルが表示されているネットワークパネル。

ボタンを押して入力番号を並べ替えると、その中に含まれるチャンクが並べ替えコードがフェッチされて実行されます。

2.7 KB の JavaScript バンドルに続いて 13.9 KB の JavaScript バンドルが表示されたネットワークパネル。

引き続き数字が並べ替えられていることに注目してください。

まとめ

コード分割と遅延読み込みは、コードの実行をアプリケーションの初回バンドルサイズに比例しますが、ページの読み込み時間を大幅に短縮できますただし、Google Cloud で考慮すべき点がいくつかあります。

遅延読み込み UI

特定のコードモジュールを遅延読み込みする場合、ネットワーク接続が脆弱なユーザー向けの可能性があります。分割とユーザーがアクションを送信したときに非常に大きなコードチャンクを読み込むと、アプリケーションが動作を停止したように見えるため、読み込みインジケーターです。

サードパーティノードモジュールの遅延読み込み

モジュールでサードパーティの依存関係を遅延読み込みすることは、使用する場所によって異なります。通常はサードパーティが依存関係は、個別の vendor バンドルに分割されます。このバンドルは、次の理由により、キャッシュに保存できます。更新頻度が下がります詳しくは、 SplitChunksPlugin: 説明します。

JavaScript フレームワークを使用した遅延読み込み

Webpack を使用する一般的なフレームワークやライブラリの多くは、読み込みの途中で動的インポートを使用するよりも、遅延読み込みが簡単です。説明します。

動的インポートの仕組みを理解しておくと役立ちますが、必ず特定のモジュールを遅延読み込みするために、フレームワークやライブラリが推奨するメソッドを使用します。

プリロードとプリフェッチ

可能であれば、<link rel="preload"> などのブラウザヒントを利用します。または <link rel="prefetch"> を使用して、重要なモジュールをできます。webpack はインポート時にマジックコメントを使用して、両方のヒントをサポートします。ステートメント。この点については、クリティカルチャンクをプリロードするのガイド。

コード以上の遅延読み込み

画像は、アプリケーションのかなりの部分を占めることがあります。遅延読み込みをスクロールしなければ見えない位置やデバイスのビューポートの外側に位置することでウェブサイトの動作が速くなることがあります読む詳しくは Lazysizes ガイド。