潍坊设计网站,重庆未来科技网站建设,俄语网站服务器,php mysql 网站模板文章目录 前言懒加载示例后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;webpack #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努力填补技术短板。(如果出现错误#xff0c;感谢大家指出… 文章目录 前言懒加载示例后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏webpack 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 懒加载
懒加载或者按需加载是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开然后在一些代码块中完成某些操作后立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度减轻了它的总体体积因为某些代码块可能永远不会被加载。
示例
我们在 代码分离 中的例子基础上进一步做些调整来说明这个概念。那里的代码确实会在脚本运行的时候产生一个分离的代码块 lodash.bundle.js 在技术概念上“懒加载”它。问题是加载这个包并不需要用户的交互 - 意思是每次加载页面的时候都会请求它。这样做并没有对我们有很多帮助还会对性能产生负面影响。
我们试试不同的做法。我们增加一个交互当用户点击按钮的时候用 console 打印一些文字。但是会等到第一次交互的时候再加载那个代码块print.js。为此我们返回到代码分离的例子中把 lodash 放到主代码块中重新运行 代码分离 中的代码 final Dynamic Imports example。
project
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src|- index.js|- print.js
|- /node_modulessrc/print.js
console.log(The print.js module has loaded! See the network tab in dev tools...
);export default () {console.log(Button Clicked: Here\s some text!);
};src/index.js import _ from lodash;- async function getComponent() {function component() {const element document.createElement(div);
- const _ await import(/* webpackChunkName: lodash */ lodash);const button document.createElement(button);const br document.createElement(br); button.innerHTML Click me and look at the console!;element.innerHTML _.join([Hello, webpack], );element.appendChild(br);element.appendChild(button);// Note that because a network request is involved, some indication// of loading would need to be shown in a production-level site/app.button.onclick e import(/* webpackChunkName: print */ ./print).then(module {const print module.default;print();});return element;}- getComponent().then(component {
- document.body.appendChild(component);
- });document.body.appendChild(component());Warning 注意当调用 ES6 模块的 import() 方法引入模块时必须指向模块的 .default 值因为它才是 promise 被处理后返回的实际的 module 对象。 现在运行 webpack 来验证一下我们的懒加载功能
...Asset Size Chunks Chunk Names
print.bundle.js 417 bytes 0 [emitted] print
index.bundle.js 548 kB 1 [emitted] [big] indexindex.html 189 bytes [emitted]
...后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
