最近业余时间一直在做一个个人项目，使用的是vue+vue-router实现的单页面应用。相对于多页面应用来说，其实单页面应用对性能优化的要求要更高，因为首屏加载的文件要更大，只要过了首屏加载问题，使用过程中单页面应用是会比多页面应用流畅的多的。闲话不多说，接下来讲下我优化过程中两个很实用的方法：
（1）对路由组件进行懒加载
这里的懒加载是指在访问到对应的组件时才加载它，首屏的时候不加载。这里实现的方法很简单，只要将以前直接import组件的方式改为：const Login = () => import('@/pages/Login’);即可。
我的项目最大文件（vendor.js）从1M变成了800kb，加载速度从10.5s变成了8.5s，有可能你会问，8.5s才加载出来是不是有点垃圾了，这我也没办法，服务器下载速度才一两百kb...
具体参考官网示例：https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
（2）针对第三方库文件使用cdn方式
之前我是使用npm安装之后import方式，这样就相当于一起打包到了vendor文件里了。
按照bootstrap官网引入相应的cdn文件后（包括jquery和bootstrap），我的项目最大文件大小变成了680kb，加载速度从8.5s变成了5.8s。
然后试图引入element-ui theme-chalk之后，最大文件大小没多大变化，但是加载速度从5.8s变成了4.2s。
接着又引入了vue和element-ui cdn文件，这下网站有了巨大突破，最大文件竟然降到了37kb，自己都被惊讶到了，加载速度也从4.2s变成了80ms，整个网站加载完成只花了1.5s，终于达到了秒开的效果，美滋滋...哈哈哈
以上两点就是我最近实践过程的总结，以后有新的收获我也会进一步更新的。
附：我的个人项目可以在http://47.100.177.183体验，之所以没有域名，就是备案的锅，想备案上海的又要求上海居住证，想备案湖南老家的，又没有湖南归属地的手机号（个人觉得这是一个奇葩要求）…