疫情数据分析平台（十）：部署生产环境及优化

基本把框架搭起来，并且把后端同学做好的工作连接上后，我作为前端便可以考虑上传云服务器进行部署，之后的功能可以增量迭代。首先把项目部署，之后的内容都是重复且简单的。

我们使用的服务器是阿里云，1M小水管，对于我们这个大数据分析平台，涉及海量的数据及图表，服务器带宽实在难顶。实际也是如此，不过我们项目经费不足（完全自费），也租不起更好的服务器，只得将就。

但是面对1M传输带宽，我仍有办法将其优化。首次部署后，我发现主要问题如下：

1. 接口缓慢，加载数据非常慢
2. 首屏加载时间长达三十多秒，无法忍受的等待
3. 一些CSS上的样式错误，生产环境与开发环境不一致
4. 不同浏览器上排布的不一致

面对如上问题，我都有办法能够优化。

首先是接口请求数据十分缓慢，通过实际抓包，我发现几个后端接口过大，同时也不需要那么多数据，高达432KB，而我们小水管服务器带宽分配到这一接口上只有42kb，十几秒的等待时间是无法避免的。

所以首先与后端商量削减后端接口的大小，将其构造成我所需要的精简格式，请求后抓包发现大小缩减巨大：

最大不过8.4K,都能够在毫秒级别进行下载。

同时，我们前端疫情地图采用的是自定义地图，需要引入大量的json文件，初始加载便要下载这大量的json文件。对此，我的选择是采用按需引入的方式，将代码逻辑改为对应省份点击后再引入对应省份的地图文件，详细可见之前中国疫情地图绘制部分。

针对第二点，即首屏加载时间过长，三十秒的加载时间让人无法忍受，再加上客观存在的1M小水管带宽限制，我必须采用多种方法混合使用来降低首屏加载时间。

采用的第一种方法是路由懒加载，vue项目是一个单页面项目，在加载时会把所有用到的路由页面加载。而我们实际上并不需要全部加载，只需要在使用时载入相关的路由即可，点击对应页面后才加载相应页面资源是比较合理的手段。

在router文件中，删除不必要的路由，注释掉所有import，在路由处改写为：

routes: [
    {
      path: '/',
      name: 'homepage',
      component:()=>import("../components/home/homepage")
    },
    {
      path:'/area_data',
      name:'area_data',
      component:()=>import("../components/home/area_data")
    },
    {
      path:'/area_policy',
      name:'area_policy',
      component:()=>import("../components/container/area_policy")
    },
    {
      path:'/news_page',
      name:'news_page',
      component:()=>import("../components/home/news_page")
    },

（部分路由）

可见改成了懒加载的形式。在打包时也能直接发现有所不同，之前打包产生的文件中app.js这一文件是所有JavaScript的文件，只有一个文件，大小高达1.4M，意味着在首屏加载时需要下载一个1.4M的文件，尽管大多数内容暂时不需要。在改成了按需引入路由后，可以看到文件分为若干，每个大小适中：

 仅仅如此依然不够，面对我们大数据平台和较小带宽的不匹配问题，我还必须采用更多的优化方法。

在开发vue项目时，我引入了许多依赖，包括vue-resource、element-ui等，这些依赖包所占的大小不容小觑。事实上，在打包过程中，我发现名为vendor的文件（即打包各种依赖包的文件）足足有1.8M大小。为了减少这一大小，我采用了CDN引入的方式：

CDN引入本质上是不把依赖的包放入项目文件中，而是通过在index.html中引入，在最近的服务器上加载对应的包，一定程度上绕过了带宽限制。一般来说在较大型项目才会用到CDN引入的方法。

首先在index.html文件中引入我们所需要的包：

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
<!--    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>-->
    <script src="https://cdn.bootcss.com/axios/0.26.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.15.6/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/element-ui/2.15.6/index.js"></script>

这一操作基本上就将所需要的包引入。

之后在webpack.base.conf文件中设置哪些用到的依赖包无需打包进dist文件夹：

 注意后面的名字是对应于实际使用的名字。

最后在main.js文件中注释掉原有的引入：

 但注意全局注册的一些配置不能注释：

 到此，CDN引入成功。

再次打包可以发现vendor减少到1M左右，算是极大的减小了。

通过此若干方法，基本上把首屏加载时间减少到了7、8秒左右，勉强算是用户载入忍耐的极限。