故事的開始：
爲了體驗一下把自己的網站放在外網服務器上，作爲學生黨的我，手頭沒有太多的money，只好在騰訊雲上買了一臺1核1M的服務器，這可是最低的配置了。
一開始使用npm run build得到的dist文件夾體積將近有10MB，放到服務器上，然後從外網首次打開，時間大約有15-20s吧，心想這怎麼可以忍受啊。於是乎發揮大腦的能動性，開始收集各種方法，終於皇天不負有心人，發生了以下的演變。
dist文件夾 將近10MB -> 不足1MB
首頁加載時間 15-20s -> 3-4s
下面將重點講解如何使用1M的服務器來把首頁加載時間縮短在3s
優化策略：
這個優化策略主要從3個方面來講，做好筆記了，各位看官。
①、cdn引入
同樣的，細心的同學可能會留意到在打包完項目後，會發現dist文件中有個名爲vendor xxxx.js的文件有點亮眼，因爲它的體積相對其他js文件來說就有點大了，那麼這個文件是怎麼生成得來的呢？
這個vendor文件就是根據我們的所引入的插件、庫生成的，像Vue、ElementUI等之類的，引入的庫的越多，打包後生成的vendor文件就越大，那麼怎麼減少這個vendor文件的體積呢？
那就是把這些體積較大的插件通過cdn引入，在我們的index.html文件裏，相信做到vue開發的，在html引入外部css和js文件難不倒大家吧，如圖所示：
這裏注意下：<script>標籤要在body內，否則獲取不到所引入的cdn文件，自然就會報想Vue is not defined的錯誤了
修改完index.html 文件後，我們還需要修改另外一個地方
找到build文件夾下webpack.base.conf.js文件，找到下列地方，如圖：
選中的externals那塊本來是沒有的，是我自己添加上去的，自己按照上面的格式照搬下來即可，
這裏有個坑的需要提醒一下，上面我把element-ui給註釋掉，在看其他的文章的時候發現cdn引入element的正確操作如下：
①、external不需要寫elementUI
②、在main.js的如下都註釋掉,這可能是webpack的機制，有待討論
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
如果上面的兩步沒有正確操作，則會可能報出 ElementUI is not defined 的錯誤
②、大圖片另加載
這個原理也是跟上面的cdn引入一樣，基於分擔服務器下載的原理
我們在項目的時候都會有自己的images文件夾，裏面包含了自己項目所需要的圖片，雖然可以使用圖片懶加載，但我想到另外一個方法，有得必有失，這個方面就需要佔用額外的內存。
我們可以利用雲功能的對象存儲把圖片放在第三方服務器上，利用得到外鏈全部替換本地圖片路徑，這樣在加載圖片的時候比在自己的服務器快很多，這個時候只需要考慮用戶的網速而不用考慮自己服務器的帶寬。
這個只是我自己想法，相對於我這種學生黨沒錢買服務器來說哈，大公司就當我什麼都沒說
③、路由懶加載
官方文檔地址： https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
簡單來說就是訪問到當前頁面纔會加載相關的資源，這對提高首頁加載速度有很大的好處。
代碼格式如圖：
這裏就不多說了，因爲官方文檔有哈。