参考https://www.cnblogs.com/zhanyishu/p/6587571.html

五、配置异步组件实现懒加载的问题分析

　　1、多次进出同一个异步加载页面是否会造成多次加载组件？

　　答：否，首次需要用到组件时浏览器会发送请求加载组件，加载完将会缓存起来，以供之后再次用到该组件时调用

　　2、在多个地方使用同一个异步组件时是否造成多次加载组件？如：

//a页面

export default {

components: {

historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载

},

}

//b页面

export default {

components: {

historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载

},

}

　　答：否，理由同上

　　3、如果在两个异步加载的页面中分别同步与异步加载同一个组件时是否会造成资源重用？如：

//a页面
import historyTab from '../../component/historyTab/historyTab.vue';
export default {
    components: {
        historyTab
    },
}

//b页面
export default {
    components: {
        historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载
    },
}

　　答: 会, 将会造成资源重用, 根据打包后输出的结果来看, a页面中会嵌入historyTab组件的代码, b页面中的historyTab组件还是采用异步加载的方式, 另外打包chunk；

　　解决方案：组件开发时，如果根页面没有导入组件的情况下，而是在其他异步加载页面中同时用到组件，那么为实现资源的最大利用，在协同开发的时候全部人都使用异步加载组件

　　4、在异步加载页面中载嵌入异步加载的组件时对页面是否会有渲染延时影响？

　　答：会，异步加载的组件将会比页面中其他元素滞后出现，页面会有瞬间闪跳影响；

　　解决方案：因为在首次加载组件的时候会有加载时间，出现页面滞后，所以需要合理的进行页面结构设计，避免首次出现跳闪现象；

六、懒加载的最终实现方案

　　1、路由页面以及路由页面中的组件全都使用懒加载

　　优点：（1）最大化的实现随用随载

　　　　　（2）团队开发不会因为沟通问题造成资源的重复浪费　　　　

　　缺点：（1）当一个页面中嵌套多个组件时将发送多次的http请求，可能会造成网页显示过慢且渲染参差不齐的问题

　　2、路由页面使用懒加载，而路由页面中的组件按需进行懒加载, 即如果组件不大且使用不太频繁, 直接在路由页面中导入组件, 如果组件使用较为频繁使用懒加载

　　优点：（1）能够减少页面中的http请求，页面显示效果好

　　缺点：（2）需要团队事先交流，在框架中分别建立懒加载组件与非懒加载组件文件夹

　　3、路由页面使用懒加载，在不特别影响首页显示延迟的情况下，根页面合理导入复用组件，再结合方案2

　　优点：（1）合理解决首页延迟显示问题

　　　　　（2）能够最大化的减少http请求，且做其他他路由界面的显示效果最佳

　　缺点：（1）还是需要团队交流，建立合理区分各种加载方式的组件文件夹

import()实现路由异步加载

import()是个语法糖，返回值是一个Promise对象，意味着这需要异步处理，你可以在.then()中拿到真正的模块。基于这点，你的截图其实是这样的：

{
 path: '/',
 name: 'login',
 component: () => {
   return import('xxx');
 },
}

把import包裹在函数中，当真正用到模块的时候，才执行 component().then()。这就是懒加载了

vue2实现懒加载

import()实现路由异步加载

猜你喜欢