webpack4.15.1 学习笔记(七) — 懒加载(Lazy Loading)

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

在代码拆分的例子基础上，会在脚本运行时产生一个分离的代码块 lodash.bundle.js ，在技术概念上“懒加载”它。问题是加载这个包并不需要用户的交互，导致每次加载页面时都会请求它。这样做并没有有很多帮助，还会对性能产生负面影响。

因此可以尝试增加一个交互，当用户点击按钮时用 console 打印一些文字。但是会等到第一次交互时再加载那个代码块(print.js)。

src/print.js

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

export default () => {
  console.log('Button Clicked!');
}

src/index.js

function component() {
    var button = document.createElement('button');
    button.innerHTML = 'Click me and look at the console!';

    button.onclick = e => import( /* webpackChunkName: "print" */ './print').then(module => {
        var print = module.default;
        print();
    });
    return button;
}
document.body.appendChild(component());

当调用 import() 方法时，必须指向模块的 .default 值，因为它才是 promise 被处理后返回的实际的 module 对象。运行懒加载功能，可以发现页面中存在一个按钮。点击后才会引入 print模块，并打印相关提示，因此就完成了需要用户交互的“懒加载”。而非每次加载页面都会请求。