遅延読み込み

遅延読み込み、または「オンデマンド」読み込みは、サイトやアプリケーションを最適化する優れた方法です。このプラクティスでは、基本的にコードを論理的なブレークポイントで分割し、ユーザーが新しいコードブロックを必要とする、または必要とするような何らかのアクションを実行した後にロードします。これにより、アプリケーションの最初のロードが高速化され、一部のブロックはロードされない場合があるため、全体のサイズが軽減されます。

例

コード分割の例を少し変更して、このコンセプトをさらに詳しく説明します。そちらのコードでは、別のチャンクであるlodash.bundle.jsが生成され、スクリプトが実行されるとすぐに技術的に「遅延読み込み」されます。問題は、バンドルをロードするためにユーザーの操作が不要であることです。つまり、ページがロードされるたびにリクエストが送信されます。これはあまり役に立たず、パフォーマンスに悪影響を及ぼします。

別のことを試してみましょう。ユーザーがボタンをクリックしたときに、コンソールにテキストを記録するインタラクションを追加します。ただし、最初のインタラクションが発生するまで、そのコード(print.js)の読み込みを待ちます。これを行うには、コード分割の最後の動的インポートの例に戻って修正し、lodashをメインチャンクに残します。

プロジェクト

webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
  |- index.js
+ |- print.js
|- /node_modules

src/print.js

console.log(
  'The print.js module has loaded! See the network tab in dev tools...'
);

export default () => {
  console.log('Button Clicked: Here\'s "some text"!');
};

src/index.js

+ import _ from 'lodash';
+
- async function getComponent() {
+ function component() {
    const element = document.createElement('div');
-   const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
+   const button = document.createElement('button');
+   const br = document.createElement('br');

+   button.innerHTML = 'Click me and look at the console!';
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.appendChild(br);
+   element.appendChild(button);
+
+   // Note that because a network request is involved, some indication
+   // of loading would need to be shown in a production-level site/app.
+   button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
+     const print = module.default;
+
+     print();
+   });

    return element;
  }

- getComponent().then(component => {
-   document.body.appendChild(component);
- });
+ document.body.appendChild(component());

それでは、webpackを実行して、新しい遅延読み込み機能をチェックしてみましょう

...
          Asset       Size  Chunks                    Chunk Names
print.bundle.js  417 bytes       0  [emitted]         print
index.bundle.js     548 kB       1  [emitted]  [big]  index
     index.html  189 bytes          [emitted]
...

フレームワーク

多くのフレームワークとライブラリには、それぞれの方法論でこれをどのように達成すべきかに関する独自の推奨事項があります。いくつかの例を次に示します。

• React: コード分割と遅延読み込み
• Vue: Vue.jsでのパフォーマンス向上のための動的インポート
• Angular: ルーティング設定の遅延ロード と AngularJS + webpack = 遅延ロード