概述
之前做了一个React项目和Vue的项目，在做完后不加任何优化的情况下，这2个项目的首屏加载平均时间居然达到了20+s，好一点能进10s，差一点快30s，完全不能忍，优化势在必行，本文章记录下Vue项目的优化过程，React项目的优化后续补上。
上图是Vue项目的首页，整个项目由vue-cli搭建，主要分为4个模块，见页面左侧导航栏，总体代码量不算太大，组件的话总共50个左右吧，项目结构见下图，不算特别大的项目，但是首屏加载时间居然这么慢。
首先得确定到底是哪里导致了首屏渲染如此之慢？打开Chrome Network面板，勾上Disable cache选项，刷新页面观察资源加载情况，发现罪魁祸首就是webpack打包生成的app.js和vendor.js，其中vendor.js大小达到了1.2M,下载时间超过20秒，app.js也快到1M，而manifest.js不是很大。vendor.js主要是把node_modules里所用到的modules都合并成一个js了，所以比较大.而我们也希望将业务代码和第三方引用分开打包。
manifest.js 包含webpack的runtime代码和module manifest代码，作用是防止修改了代码但是没有修改第三方库文件导致第三方库文件也打包的问题。网上一番搜索，发现优化点主要在如下几个方面:
开启gzip压缩功能
引入CDN
路由懒加载
某些第三方组件按需加载而不是全部加载
较小的图片资源用base64嵌入src中，减少http请求
具体优化
gzip压缩
gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持,gzip压缩效率非常高，通常可以达到70%的压缩率，也就是说，如果你的网页有30K，压缩之后就变成了9K左右
我后端是用的express，开启gzip非常简单，首先npm install compression安装中间件,然后在app.js里添加use使用即可：
var compression = require('compression');
var app = express();
app.use(compression())重启服务，观察网络面板里面的response header，如果看到如下红圈里的字段则表明gzip开启成功
引入CDN
CDN(内容分发网络)，是一种公共服务，他本身有很多台位于不同地域、接入不同运营商的服务器，而所谓的使用CDN实质上就是让CDN作为网站的门面，用户访问到的是CDN服务器，而不是直接访问到网站。由于CDN内部对TCP的优化、对静态资源的缓存、预取，加上用户访问CDN时，会被智能地分配到
