延遲載入

延遲載入或「依需求」載入是很棒的網站或應用程式最佳化方式。此做法基本上包含在邏輯中斷點分割您的程式碼，然後在使用者執行需要或將需要新程式碼區塊的動作後載入該區塊。這會加快應用程式的初始載入速度，並減輕其整體負擔，因為某些區塊甚至可能永遠不會載入。

範例

讓我們從 程式碼分割 中取得範例，並稍加調整以進一步說明這個概念。那裡的程式碼確實會產生一個獨立的區塊，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 = lazyLoad