Vue首屏加速-路由懒加载

Vue-spa项目由于单页面应用的特性都会面临首屏加载速度的问题。解决这个问题的途径也有很多。但是路由懒加载绝对是其中性价比最高的方法，有效而且简单。

在router/index.js页，我们一般会看到两种写法。

一种是这样的传统的写法，这样的写法会导致打包时各个路由生成一个所有路由整合的js文件。
在首屏加载时这个js文件的加载时间会很长，路由多时这个js文件会有几MB。

// 传统方法，首屏加载很慢
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

import Login from '@/components/Login' 
import xxxx from '@/components/xxxxx' 
import xxxx from '@/components/xxxxx' 
import xxxx from '@/components/xxxxx' 
import xxxx from '@/components/xxxxx' 

export default new Router({
  routes: [
   {
      path:'/login',
      name: 'login',
      compnent: Login
    },
   {
      path:'/xxxx',
      name: 'xxxx',
      compnent: xxxx
    },
    ....
    ....
]

另一种写法就是要说到的路由懒加载写法，你可能看到很多项目中都采用下面这种写法。
但这可不仅仅是写法的不同，而是有根本性的优势。
这种写法打包时会给每个路由单独打包一个js文件，这样首屏加载时只需要加载首屏的js文件就可以了。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
   {
      path:'/login',
      name: 'login',
      component: resolve => require(['../components/login.vue'], resolve)
    },
   {
      path:'/xxxx',
      name: 'xxxx',
      component: resolve => require(['../components/xxxx.vue'], resolve)
    },
    ....
    ....
]

除此之外呢还有两个常用的优化方法：
一个是引入element或者ant 这种UI框架时不去整体引入，而是去选择自己用到的组件再加载。
另一个方法是使用compression-webpack-plugin打包gzip格式的压缩文件，这种加速需要node配置以及浏览器支持，麻烦了一点但也很有效，想要了解的同学可以自己百度。