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配置以及浏览器支持，麻烦了一点但也很有效，想要了解的同学可以自己百度。
