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

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

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

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

測定

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

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

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

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

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

最適化

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

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

オプション 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 が拒否されたケースを処理するために使用されます。 表示されます。

で確認できます。

最後に、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 ガイド。