vue----webpack----路由懒加载,组件懒加载

 一、懒加载
也叫延迟加载或者按需加载,即在需要的时候进行加载,
二、为什么要使用懒加载
  像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,

造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,
即使做了loading也是不利于用户体验,

运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

    简单的说就是:进入首页不用一次加载过多资源造成用时过长
方式一:使用vue的异步组件,可以实现路由的懒加载
 {           
     path: '/home',           
     name: 'home',           
     component: resolve => require([需要加载的路由的地址], resolve)       
   } 
方式二: es6提出的import(推荐使用这种方式)
const homeFn = () => import('../components/home/home')
         {   
      path: '/home',   
       name: 'home',            
      component: homeFn       
     },     
组件懒加载
和路由懒加载方式相同,改变组件的引入方式
方式一:
方式二:
 
总结:
路由懒加载和组件懒加载都是通过改变组件的引入方式

 

 
 
 
 
posted @ 2019-02-27 17:29  SRH啦  阅读(606)  评论(0编辑  收藏  举报