Vue CLI 2&3 下的项目优化实践 —— CDN + Gzip + Prerender

前言

这些优化方案适用于 Vue CLI 2 和 Vue CLI 3 ,文章主要基于Vue CLI 2进行介绍，关于如何在Vue CLI 3中进行相关的webpack调整，我已经放在了 vue-cli3-optimization 这个仓库下，并配有详细的注释，且额外添加方便Sass使用的loader，使用Sass时无需再在每个需要引入变量和mixin的地方，每次都很麻烦的@import。下面将详细介绍这些优化方案的实践方式和效果：

和很多小伙伴一样，我在开发Vue项目时也是基于官方vue-cli@2的webpack模版，但随着项目越做越大，依赖的第三方npm包越来越多，构建之后的文件也会越来越大，尤其是vendor.js,甚至会达到2M左右。再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。为了解决这个问题，我做了一些探索，在几乎不需要改动业务代码的情况下，找到了三种有明显效果的优化方案 —— CDN + Gzip + Prerender。我把这些方法整理了一下，放在了 Github仓库 上，意图通过不同的分支来展示不同的优化方式，对Vue项目性能的影响。你可以直接克隆下来试一试，也得益于有git历史，你也可以很方便的查看具体的改动细节。下面我将通过一个简单的项目来展示这三种优化方案的效果。

一、首先准备一个简单的项目

通过vue-cli@2的webpack模版生成，只包含最基础的Vue三件套 ———— vue、vue-router、vuex以及常用的element-ui和axios。拆分两个路由——“首页”和“通讯录”，通过axios异步获取一个通讯录名单，并利用element-ui的表格展示。直接build，不做任何优化处理，以作参照。

1.1 构建后文件说明：

1. app.css： 压缩合并后的样式文件。
2. app.js：主要包含项目中的App.vue、main.js、router、store等业务代码。
3. vendor.js：主要包含项目依赖的诸如vuex，axios等第三方库的源码，这也是为什么这个文件如此之大的原因，下一步将探索如何优化这一块，毕竟随着项目的开发，依赖的库也能会越来越多。
4. 数字.js：以0、1、2、3等数字开头的js文件，这些文件是各个路由切分出的代码块，因为我拆分了两个路由，并做了路由懒加载，所以出现了0和1两个js文件。
5. mainfest.js：mainfest的英文有清单、名单的意思，该文件包含了加载和处理路由模块的逻辑

1.2 禁用浏览器缓存，网速限定为Fast 3G下的Network图(运行在本地的nginx服务器上

可以看到未经优化的base版本在Fast 3G的网络下大概需要7秒多的时间才加载完毕

二、CDN 优化

为了更好的开发体验，报错捕获，目前已经针对dev和build进行了区分，具体查看git记录，下面仅供参考。

1. 将依赖的vue、vue-router、vuex、element-ui和axios这五个库，全部改为通过CDN链接获取。借助HtmlWebpackPlugin,可以方便的使用循环语法在index.html里插入js和css的CDN链接。这里的CDN大部分使用的 jsDelivr 提供的。

<!-- CDN文件，配置在config/index.js下 -->
<% for (var i in htmlWebpackPlugin.options.css) { %>
<link href="<%= htmlWebpackPlugin.options.css[i] %>" rel="stylesheet">
<% } %>
<% for (var i in htmlWebpackPlugin.options.js) { %>
<script src="<%= htmlWebpackPlugin.options.js[i] %>"></script>
<% } %>

2. 在build/webpack.base.conf.js中添加如下代码，这使得在使用CDN引入外部文件的情况下，依然可以在项目中使用import的语法来引入这些第三方库，也就意味着你不需要改动项目的代码，这里的键名是import的npm包名，键值是该库暴露的全局变量。 webpack文档参考链接。

  externals: {
   
    'vue': 'Vue',
    'vue-router'