C/C++教程

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

本文主要是介绍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模块,并打印相关提示,因此就完成了需要用户交互的“懒加载”。而非每次加载页面都会请求。

这篇关于webpack4.15.1 学习笔记(七) — 懒加载(Lazy Loading)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!