在使用個人境外服務器運行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>處理前：
處理後：
