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

本文介绍了一种提高网站或应用性能的方法——懒加载。通过按需加载代码块，可以显著提升首屏加载速度并减少不必要的资源加载。文章通过一个具体示例展示了如何实现点击按钮时才加载特定脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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