vue-cli+webpack优化首页加载速度慢的问题

最近在公司用vue-cli+webpack开发项目，一开始开发的时候没有注意页面加载速度慢的问题，是在开发好后放到测试服务器上做集成测试的时候，发现第一次访问页面或者open打开一个新tab页的时候加载都很慢，有时候在网速不好的情况下一个页面需要十几秒甚至二十几秒的时间才加载完毕，这样的速度完全影响用户体验。

于是就开始分析速度慢的原因，打开chrome控制台的network,重新刷新页面，发现请求资源中一个vendor.js文件下载需要十几秒，后来打开文件夹一看，这个js文件竟然有1.5M多，有时候下载时间接近10秒，而且这个文件没下载完，页面是不会开始渲染的。

这个vendor.js文件是webpack打包后生成的，他是将项目用到的所有第三方依赖包都放到这个文件里，当使用到的包比较多时会显得这个文件很大，所以接下来我们就需要对这个文件进行优化，减少体积。我优化步骤如下：

  1.分析vendor.js体积大的原因

首先，我先按照网上的建议配置好analyz（一个分析项目文件的体积大的原因，网上很多配置教程，这里不予说明），运行命令后发现vendor.js体积大主要是依赖的element-ui, echarts 和babel-polyfill这三个包比较大。一定要先做这一步，找到文件大的原因，不然无法下手。

  2. 将插件用CDN方式引入

找到原因后，我将echarts和babel-polyfill这两个插件用CDN的方式在index.html中引入

  3. 组件按需引入

element-ui本来也可以用CDN的方式引入，但由于我们针对项目的要求改了一点源码，所以就没办法用这个方法了。但之前是将整个elemeny-ui包引入项目，实际上我们在项目中没有用到全部的组件，所以后来就选择按需引入，只引入项目用到的组件，按需引入的配置可以查看element-ui的官网，有说明。

  4.使用webpack的DLLPlugin插件

之后再运行analyz命令查看，发现vendor.js的体积减小了很多了，从1.5M减小到600多K，但感觉还是有点大，之前在网上有看到可以分离vendor.js, 利用webpack的DLLPlugin插件可以抽离vendor.js的部分包，这个教程网上也有很多，这里我就不再啰嗦了。

  5.服务器开启gzip文件传输

经过以上的步骤，vendor.js的体积已经减小到了400多K，虽然感觉还是有点大，但相比之前的1.5M已经小很多了。之后我们还开启了gzip压缩传输，就是在服务器上设置，浏览器访问服务器时，如果浏览器支持gzip文件，服务器就返回gizp文件，否则就返回没有压缩的文件，这个方法虽然需要浏览器先支持gzip解压，但现在大部分主流的浏览器均已支持。

  6.服务器设置文件缓存

最后我们还设置服务器支持缓存，当打包的文件哈希值没有变时，就代表我们的文件没有更改，这时浏览器可以使用缓存的文件，不需要再向服务器请求，只有当请求的文件的哈希值改变或者缓存时间过期时才再一次向服务器请求。

  经过以上的优化后，我们再访问页面时，加载速度从最先开始的十几秒到现在只需要两三秒左右就加载完了，有时候在网速正常的情况下仅需一秒就加载出来了，不过我测试的浏览器是支持gzip文件的。

  最后总结一下，我写的这个性能优化比较简单，相当于只说了可以做些什么来提升性能优化，但具体怎么实现需要另外查资料，网上教程很多，所以这里我没有写得很详细。我当初也是按照网上的教程一步步配置实现的，整个优化过程不难，难的是理解这些实现的原理，需要点耐心研究下，当你真正理解后，你会觉得特别有成就感。