vue路由懶加載

路由懶加載能夠提高頁面的加載速度，不過使用也得看場合。有時候需要懶加載，提升首頁加載速度，一般是頁面層級較為復雜的時候。大家看一下不加代碼分割瀏覽器加載的文件。

這里藍色部分是webpack自動分割出來的，當修改業務js時候manifest和vendor是不會改變的，瀏覽器直接在緩存中提取。

會變的是app.js。如果不采用路由分割會是什么效果呢。所有的代碼都打包到app.js中，如果項目巨大，那么首頁加載會是災難。

 

1、當一個vue項目很大的時候，對於一些“暫時”用不到的組件，我們可以不進行加載，等到用到次組件時再加載。這樣可以優化spa應用首次加載白屏情況，也給用戶更好的體驗。這樣就是vue路由懶加載。

2、常用的懶加載方式有兩種：即使用 ES中的import  和 vue異步組件 

2.1 未使用懶加載

import HelloWorld from '@/components/HelloWorld'
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

2.2  使用ES中的動態import進行懶加載  (推薦使用，也是最常用的)

const HelloWorld = () => import("@/components/HelloWorld");
export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }]
})

/*或者*/

export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: () => import("@/components/HelloWorld")
  }]
})

2.3  使用VUE中的異步組件進行懶加載

export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: resolve => { require(['@/components/HelloWorld'],resovle); }
  }]
})