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~