webpack4.15.1 学习笔记(七) — 懒加载(Lazy Loading)
2022/8/8 23:23:16
本文主要是介绍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)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-04-26高性能表格工具VTable总体构成-icode9专业技术文章分享
- 2024-04-16软路由代理问题, tg 无法代理问题-icode9专业技术文章分享
- 2024-04-16程序猿用什么锅-icode9专业技术文章分享
- 2024-04-16自建 NAS 的方案-icode9专业技术文章分享
- 2024-04-14ansible 在远程主机上执行脚本,并传入参数-icode9专业技术文章分享
- 2024-04-14ansible 在远程主机上执行脚本,并传入参数, 加上remote_src: yes 配置-icode9专业技术文章分享
- 2024-04-14ansible 检测远程主机的8080端口,如果关闭,则echo 进程已关闭-icode9专业技术文章分享
- 2024-04-14result 成功怎么写-icode9专业技术文章分享
- 2024-04-14stopped 状态设置为变量,由外部传递进来-icode9专业技术文章分享
- 2024-04-14为什么ansible执行远程脚本需要放到后台-icode9专业技术文章分享