雙十一買了一臺云服務(wù)器，正巧最近用vue寫了一個生成隨機(jī)密碼的頁面，于是部署在了該機(jī)器上。
機(jī)器的部署過程就略過，如果有人感興趣，可以聯(lián)系我，交流一下。
點擊隨機(jī)密碼生成平臺查看頁面。
部署完成之后，打開頁面，接近8秒的白屏?xí)r間，頁面才渲染出來。
what？這是咋的啦？
F12打開看了一下網(wǎng)絡(luò)請求，chunk-vendors.js文件居然有700多kb！
先簡單介紹一下，這個頁面使用 Vue Cli 3 生成，為了開發(fā)方便，引入了 element-ui 做組件庫。
這個訪問速度太慢了，簡直不能忍。但是上云服務(wù)器一看，當(dāng)時圖便宜，買的最低配的云服務(wù)器，帶寬是1Mbps，也就是說，下載頁面資源，最高速度被限制在了 128kb/s ……
不怨天不怨地，怨我當(dāng)時圖便宜。
怎么提高頁面加載速度？
云服務(wù)器的帶寬升級有點貴，暫時不考慮。
那怎么在現(xiàn)有資源下，提高頁面加載速度呢？
首先想到的，就是開啟nginx的gzip，開啟資源緩存。設(shè)置之后，多刷幾次頁面，簡直快到飛起。
但是！但是！第一次加載頁面，沒有緩存的時候還是慢啊……
還是得想辦法解決。
那就用外鏈吧，用第三方cdn的資源，不占用我們機(jī)器的帶寬。
改動點如下：
- （1）在 /public/index.html 中引入需要的js和css文件
（2）去掉 package.json 中對于 vue、element-ui 等相關(guān)資源的依賴
（3）/src/main.js ，去掉 vue、element-ui 等相關(guān)資源的 import 和 vue.use 這些語句
- （4）配置
externals。由于使用Vue Cli 3默認(rèn)配置，新建出來的項目沒有了build目錄，首先得在項目根目錄下，新建 vue.config.js 文件，里面添加以下代碼：
module.exports = {
configureWebpack:{
externals:{
'Vue': 'Vue',
'element-ui': 'element-ui',
'clipboard':'VueClipboard'
}
}
}
為什么要配置 externals ？
因為在使用 vue-cli 進(jìn)行編譯的時候，可以通過這個，告訴腳手架，引用的外部資源怎么去識別。
最后效果
就這樣，放在云服務(wù)器上的資源，由原來的接近800Kb，減少到了100Kb以內(nèi)，頁面加載速度顯著提升~
