一、定义：懒加载也叫延迟加载，即按需加载，
二、为什么需要懒加载： 在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
三、如何与webpack配合实现组件懒加载
- 在webpack配置文件中的output路径配置chunkFilename属性， chunkFilename路径将会作为组件懒加载的路径
- 配合webpack支持的异步加载方法
—- resolve => require([URL], resolve), 支持性好 () => import(URL),
—- webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用,
npm install –save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015
– es6转换为es5 –
四、具体实例中实现懒加载
1， 路由中配置异步组件
2， 实例中配置异步组件
3，全局注册异步组件
五、配置异步组件实现懒加载的问题分析
- 多次进入同一个页面也不会出现多次加载的问题，页面在加载之后会出现缓存，同理，同一个一个组件多次加载也不会出现多次加载的问题
- 在异步加载页面中载嵌入异步加载的组件时对页面的影响？异步加载的组件将会比页面中其他元素滞后出现， 页面会有瞬间闪跳影响；因为在首次加载组件的时候会有加载时间， 出现页面滞后， 所以需要合理的进行页面结构设计， 避免首次出现跳闪现象；
2，路由页面使用懒加载，路由页面里面的组件按需进行加载
- 优点：合理解决首页延迟的问题，能够最大化的减少http的请求，
- 缺点：对团队合作要求比较严格，建立合理区分各种加载方式的组件文件夹
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/216170.html原文链接：https://javaforall.net
