vue项目首页加载速度优化

凡是作SPA的项目，特别是移动端的SAP项目，首屏加载速度一定是一个绕不过去的话题。接下来我就咱们项目里的一些实践来作一下总结。但愿抛砖引玉，若是各位有更好的方案，不吝赐教。

1: 针对第三方js库的优化

咱们项目里用到的第三方js库主要有：vue, vue-router, vuex, axio, 咱们还用到了qiniu。你们知道这些依赖库的js文件都会被一块儿打包到vender那个js文件里面，若是这些你的第三方依赖库不少，很大的话，那就会致使vender这个文件很大，那首屏加载的速度确定会被拖慢。

针对这个问题咱们的解决方案是，用文档的cdn文件代替，而不用打包到vender里面去。具体的作法是：

1: 在index.html里面引入依赖库js文件

// index.html
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

2: 去掉第三方js的import,由于在第一步已经经过script标签引用进来了。

3: 把第三方库的js文件从打包文件里去掉

这一步的作法就是利用webpack的externals。具体作法就是在 build/webpack.base.conf.js文件的module里面与rules同层加入externals：

2: 利用vue-router进行页面的懒加载（lazy load）

这里的页面的懒加载是指，假如我如今访问A页面，只会去请求A页面里的东西，其余页面的东西不会去请求。
具体怎么作，vue-router的官网都写得很清楚了,有须要的去看一下就懂了：
经过vue-router实现页面的懒加载

3: 图片资源的压缩
严格说来这一步不算在编码技术范围内，可是却对页面的加载速度影响很大，特别是对于移动端的项目来讲。
对于非logo的图片文件，让UI设计师提供jpg格式的，不要用png.
对于全部的图片文件，均可以在一个叫tinypng的网站上去压缩一下。网址：
https://tinypng.com/

成果总结：经过以上的那些方案，再加上咱们的代码原本就是部署在CDN上面的，咱们在移动端（微信，QQ，浏览器等）基本都能达到秒开的效果。