vue 路由懶加載

題外：

我司目前的後臺管理網站依舊是 jq + xxUI 構成的 ，早就想把 丫兒 個換成 vue了，

苦於整個組幾乎一致處於一個忙碌的狀態，沒有時間來重構。

然鵝，昨天今天組長找到我說要用 vue 搞起來，這個問題不大，畢竟以前用他完成了幾個項目，很有收穫，教訓滿滿。

看着 左側 冗長菜單 item ，不由陷入了沉思。

當打包構建應用時，Javascript 包會變得很是大，首次加載即使使用了 各類 LOADING ，各類 動畫，確定體驗賊差，

若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。

路由懶加載

因而想到了 vue 路由懶加載 這個路子，vue-router支持WebPack內置的異步模塊加載系統，只須要在路由被訪問時按需加載。

嗯，搞個 demo 出來先。

1 初始化一個項目，創建三個頁面，分別綁定路由 

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import icon from '@/components/icon'
import progress from '@/components/progress'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/icon',
      name: 'icon',
      component: icon
    },
    {
      path: '/progress',
      name: 'progress',
      component: progress
    }
  ]
})

2. 暢通無阻，and ，整改 路由

 routes: [
    {
      path:'/home',
      name: 'home',
      component: resolve => require(['@/components/home'],resolve)
    },
    {
      path:'/icon',
      name: 'icon',
      component: resolve => require(['@/components/icon'],resolve)
    },
    {
      path:'/progress',
      name: 'progress',
      component:resolve => require(['@/components/progress'],resolve)
    },
  ]

效果上如上圖所示，依舊沒有問題。（加載速率在此沒法測試，畢竟須要大量的 頁面，大量  js 的邏輯代碼測試起來才真實有效），

咱們只分析這種寫法：這是一種 code 分塊的語法，等同於 ：

const Home= resolve => require(['@/components/home'], resolve);
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home}
  ]
})

 

這個就看我的習慣了

最後在打包測試的過程當中，發現 在修改完路由後 ，js文件找不到了，路徑上發生了些微小的變化，下面是個人解決方法：

 

至於後面的測試，等項目大概成型，作一份兒速度測試。

 

以上，8~