webpack学习系列－lazy-loading (https://webpack.js.org/guides/lazy-loading/)

Lazy Loading

懒加载，或者说按需加载，是优化网站或者应用的一个非常好的方式。这个实践本质上是将代码在逻辑点切割，当用户做了某些点击或者互动后，将需要的代码或者未来会需要的代码加载。这样做会加快应用的首屏加载，减少整个应用的资源加载量，因为一些代码块可能永远不会被加载。

 

Example

 

project

上节（代码分割）的例子将生成的js文件一分为二，只要引入的js文件运行了，lodash.bundle.js就会被加载，这种技术对我们并没有太大帮助，反而会对性能产生负面影响。下面我们做一些更改，只有用户点击按钮，才会请求print.js。例子如下：

import _ from 'lodash';
function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    btn.innerHTML = 'Click me and check the console!';
    element.appendChild(btn);
    btn.onclick = e => import('./print').then(module => {    //lazy load核心，只有点击按钮时，才会加载print.js文件
        var print = module.default;
        print(); 
    })
    return element;
}
document.body.appendChild(component());

以上代码的构建结果如下图：

打开index.html,会发现，页面打开时，只会加载app1.bundle.js文件，当点击页面上的按钮时，会加载0.bundle.js文件，进而控制台打印出消息。