详解VueSPA项目优化小记-创新互联

概述

之前做了一个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代码，作用是防止修改了代码但是没有修改第三方库文件导致第三方库文件也打包的问题。

网上一番搜索，发现优化点主要在如下几个方面:

1. 开启gzip压缩功能
2. 引入CDN
3. 路由懒加载
4. 某些第三方组件按需加载而不是全部加载
5. 较小的图片资源用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())

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。