如何加快Vue單頁載入（和打包）速度
在使用個人境外伺服器執行vue專案時，會遇到打包的vendor.js過大而導致無快取載入時，頁面會空白數秒之久。 解決這個問題有2個思路：1是通過壓縮混淆程式碼、gzip實際減小程式碼大小；2是將部分不會改動的檔案提出，放到CDN上。 這裡列舉幾種解決方案。（uglify由於vue-cli已預設包含，這裡不寫）
#1 gzip
使用gzip壓縮vendor.js可以有效減小檔案體積，一般能壓縮70%左右。 可以選擇使用nginx反向代理來做gzip功能。 也可以選擇nodejs內部壓縮。
const compression = require('compression'); app.use(compression());
#2 提取js/css到cdn
以一個vue專案為例。專案引用了vue、axios、iview、iview的css：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import iView from 'iview'
import 'iview/dist/styles/iview.css'#2.1 提取js到外部，減小vendor.js體積
1. 在/build/webpack.base.conf.js中，增加externals：
module.exports = { externals: { 'vue': 'Vue', 'axios': 'axios', 'iview': 'iview' } }
注意，externals的鍵值對中，鍵應為在
/src/main.js中import的名稱，值為引用的外部檔案export的名稱。以cdn.bootcss.com的庫檔案為例，vue的匯出名為Vue，mint-ui為MINT，vue-router為VueRouter。
2. 複製/index.html為/index.dev.html，並修改/build/webpack.dev.conf如下：
plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', // template: 'index.html', template: 'index.dev.html', inject: true }) ]
* 這是為了解決dev環境下，重複引用庫的問題。
3. 在/index.html中，引入cdn檔案
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/iview/2.6.0/iview.min.js"></script>
</body>處理前： 
vender.js大小148KB，處理後大小13.7KB。
另增加3個CDN檔案，大小34.9KB、5.6KB、115KB，增加115.5KB。
總體積變化不大。將大體積檔案放置在cdn上，減小了伺服器流量壓力，加快了不同地區網頁載入速度。
#2.2 提取css到外部，減小app.css體積
在/src/main.js中，前端框架的CSS引用，都可去除，並改為在/index.html中引用其CDN版本。
1. 去除/src/main.js中的CSS檔案import，改為在開發環境下require
// import 'iview/dist/styles/iview.css
if (process.env.NODE_ENV === 'development') {
require('mint-ui/lib/style.css')
}2. 在/index.html中，引入cdn檔案
<head>
<link href="https://cdn.bootcss.com/iview/2.6.0/styles/iview.css" rel="stylesheet">
<title>app</title>
</head>處理前： 
