Webpack 懒加载

懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

示例

我们在 代码分离 中的例子基础上，进一步做些调整来说明这个概念。那里的代码确实会在脚本运行的时候产生一个分离的代码块 lodash.bundle.js ，在技术概念上“懒加载”它。问题是加载这个包并不需要用户的交互 – 意思是每次加载页面的时候都会请求它。这样做并没有对我们有很多帮助，还会对性能产生负面影响。

我们试试不同的做法。我们增加一个交互，当用户点击按钮的时候用 console 打印一些文字。但是会等到第一次交互的时候再加载那个代码块（print.js）。为此，我们返回到代码分离的例子中，把 lodash 放到主代码块中，重新运行 代码分离 中的代码 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: Heres "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: 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