Vue cli3 前端優化
程序員們浪費了大量時間來思考，或者說是擔憂，他們的程序中非關鍵部分的運行速度。並且他們對於性能的這些嘗試，實際上卻對代碼的調試和維護有着非常消極的影響。我們應當忘記那些不重要的性能影響，在 97% 的時間里都可以這么說：過早優化乃萬惡之源。當然我們也不應當在那關鍵的 3% 上放棄我們的機會。—— Donald Knuth
項目優化最難的地方就是如何在開發生命周期中最適當的時候去做優化，萬幸的是webpack打包的時候已經幫我們對vue項目進行了一些優化：模塊化打包、合並壓縮等，但仍有一些開發過程中需要注意的優化。
一、靜態資源優化
- Css：
①使用Sass開發的時候，要注意@import導入的css是否是都需要的，混合器和繼承器的使用也要慎重。Sass里的代碼重用性可以提高前端的開發效率，但是大量的重用可能會導致生成的樣式表過大，導致加載緩慢。
解決辦法：公共代碼抽離，在vue.config.js里進行配置：
②如果css都打包進一個css文件，會導致這個文件太大，首屏加載時間緩慢。
解決辦法：CSS分離，在vue.config.js里配置
2.圖片：
①壓縮圖片
②將圖片轉成base64或者svg。
二、優化網絡連接
- 減少相同域名下的並發HTTP連接數
比如谷歌最大並發HTTP連接數為6個，head部分的資源會單獨下載，且阻塞body中的其他資源的加載，會優先加載script和link標簽定義的資源。解決辦法：使用不同的域名指向相同的源。比如京東、淘寶的圖片，商品頁面會從不同域名加載圖片，以達到快速渲染頁面的目的。
- 使用CDN
CDN全稱是Content Delivery Network，即內容分發網絡，它能夠實時地根據網絡流量和各節點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節點上。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的狀況，提高用戶訪問網站的響應速度。
三、優化資源加載
1. 通過rel="preload"進行內容預加載
<link> 元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁面中 <head>元素內部書寫一些聲明式的資源獲取請求，可以指明哪些資源是在頁面加載完成后即刻需要的。對於這種即刻需要的資源，你可能希望在頁面加載的生命周期的早期階段就開始獲取，在瀏覽器的主渲染機制介入前就進行預加載。這一機制使得資源可以更早的得到加載並可用，且更不易阻塞頁面的初步渲染，進而提升性能。
2.按需加載
按需加載，是一種很好的優化網頁或應用的方式。這種方式實際上是先把代碼在一些邏輯斷點處分離開，然后在一些代碼塊中完成某些操作后，立即引用或即將引用另外一些新的代碼塊。這樣加快了應用的初始加載速度，減輕了它的總體體積，因為某些代碼塊可能永遠不會被加載。特別是使用插件的時候，盡量避免在main.js里全局注冊，當只使用插件的某個功能的時候，單獨引入功能，而不是引入整個插件。
如何查看vue對這些資源的加載和打包：
①先安裝一個資源分析插件：npm intall webpack-bundle-analyzer -save-dev
②在vue.config.js里進行配置
③npm run dev查看資源打包情況
- 路由懶加載
當打包構建應用時，JavaScript包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。
①在router.js里設置需要懶加載的頁面
②在vue.config.js里關閉prefetch(預先加載模塊)
- 開啟gzip
HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。大流量的WEB站點常常使用GZIP壓縮技術來讓用戶感受更快的速度。這一般是指WWW服務器中安裝的一個功能，當有人來訪問這個服務器中的網站時，服務器中的這個功能就將網頁內容壓縮后傳輸到來訪的電腦瀏覽器中顯示出來。一般對純文本內容可壓縮到原大小的40%。
總結：
前端對資源進行優化后，不僅能減少資源體積，節約帶寬使用，還能減少首屏加載時間，提高用戶體驗感。
公共代碼抽離和路由懶加載沖突。路由懶加載可以分包加載；公共代碼抽離可以減少打包后整體項目大小，且抽離出公共的CSS/JS，減小某幾個超大JS/CSS的體積，具體請看項目情況而定。
提升首屏速度：
- 圖片壓縮
- 路由懶加載
- 按需加載
- 開啟gzip
- 使用CDN加速
- 使用多域名HTTP請求