vue路由组件懒加载介绍及使用

末蓝、 2021-09-16 21:42 477阅读 0赞

**一、什么是懒加载**

在vue中组件懒加载又称为代码分割，也叫延迟加载，即在需要的时候进行加载，随用随载。

**二、为什么要使用路由组件懒加载**

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

简单的说就是：进入首页不用一次加载过多资源造成用时过长！！！

**三、使用方式**

（1）没有使用路由懒加载

import MSite from '../pages/MSite/MSite.vue'
    export default new VueRouter({
        routes:[
            {
                path:'/msite',
                component:MSite,
            },
        ]
    })

（2）使用了路由懒加载

const MSite = () => import('../pages/MSite/MSite.vue')
    export default new VueRouter({
        routes:[
            {
                path:'/msite',
                component:MSite,
            },
        ]
    })

如上所示，只是将import MSite from '../pages/MSite/MSite.vue'改成const MSite = () => import('../pages/MSite/MSite.vue')即实现了路由懒加载的效果，原因很简单：第二种方式返回路由组件的函数，只有执行此函数才会加载对应的组件。

也就是说，在执行入口js也就是main.js时，执行到const MSite = () => import('../pages/MSite/MSite.vue')时，仅仅是申明了你这个路由组件，而并没有真正去请求它，当你点击相应路由链接时才会去请求它，并且，只有第一次点击才会去请求，后续不会再重复请求。