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