Webpack 懶加載

懶加載或者按需加載，是一種很好的優(yōu)化網(wǎng)頁(yè)或應(yīng)用的方式。這種方式實(shí)際上是先把你的代碼在一些邏輯斷點(diǎn)處分離開(kāi)，然后在一些代碼塊中完成某些操作后，立即引用或即將引用另外一些新的代碼塊。這樣加快了應(yīng)用的初始加載速度，減輕了它的總體體積，因?yàn)槟承┐a塊可能永遠(yuǎn)不會(huì)被加載。

示例

我們?cè)?代碼分離 中的例子基礎(chǔ)上，進(jìn)一步做些調(diào)整來(lái)說(shuō)明這個(gè)概念。那里的代碼確實(shí)會(huì)在腳本運(yùn)行的時(shí)候產(chǎn)生一個(gè)分離的代碼塊 lodash.bundle.js ，在技術(shù)概念上“懶加載”它。問(wèn)題是加載這個(gè)包并不需要用戶的交互 - 意思是每次加載頁(yè)面的時(shí)候都會(huì)請(qǐng)求它。這樣做并沒(méi)有對(duì)我們有很多幫助，還會(huì)對(duì)性能產(chǎn)生負(fù)面影響。

我們?cè)囋嚥煌淖龇āＮ覀冊(cè)黾右粋€(gè)交互，當(dāng)用戶點(diǎn)擊按鈕的時(shí)候用 console 打印一些文字。但是會(huì)等到第一次交互的時(shí)候再加載那個(gè)代碼塊（print.js）。為此，我們返回到代碼分離的例子中，把 lodash 放到主代碼塊中，重新運(yùn)行 代碼分離 中的代碼 final Dynamic Imports example。

project

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());

現(xiàn)在運(yùn)行 webpack 來(lái)驗(yàn)證一下我們的懶加載功能：

...
          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]
...

框架

許多框架和類庫(kù)對(duì)于如何用它們自己的方式來(lái)實(shí)現(xiàn)（懶加載）都有自己的建議。這里有一些例子：

• React: Code Splitting and Lazy Loading
• Vue: Dynamic Imports in Vue.js for better performance
• Angular: Lazy Loading route configuration and AngularJS + webpack = lazyLoad

Further Reading

• Lazy Loading ES2015 Modules in the Browser
• Asynchronous vs Deferred JavaScript