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~