vue组件懒加载与路由懒加载的实现

Posted 2020-11-21 uimeigui

在项目很大的时候，首页会一次导入所有页面与组件，可以使用懒加载实现项目的优化,但项目很小，不推荐使用，项目小，分开后的懒加载会发多次请求，带来更多的性能缺陷

路由写法

//假设components下有一个home.vue,需要在路由页面引入
new Router({
   routes:[{
    path:‘/‘,
    name:"home",
    components:()=>import("./components/home") //将路由顶部的引入，放在这里就实现路由的懒加载，()=>返回后面跟的一个数据，()=>{}是一个函数.
}]
    
});

//组件实现方法类似,假设要引入homechild组件
export default {
     name"home",
    components:{                    //注册vue组件
 homeChild:()=>import("./homeChild");
}
}