一、前言
隨着現在網站越來越酷炫，各種圖片，資源庫，動畫等等用的越來越多，在用戶視覺和功能的提升的同時，性能也成爲一個必須考慮的點。有人說“一個網站打開時間超過8s，網民就會流失70%以上。”，這種說法我覺得不是很正確的，除非是非常重要、必須要使用的網站，否則超過5s我基本直接關了，體驗太差。所以，用戶“忍讓”是有極限的，要想把握更多的用戶，增強用戶體驗，性能優化是必不可少的一環。
二、性能優化方案
1. 開啓gzip壓縮
在通過webpack壓縮後的文件往往會很大，比如vendor，經常是好幾M以上多的，甚至更大。請求資源過大是影響性能的重大因素。在瀏覽器的請求頭裏包含着這樣一句話Accept-Encoding:gzip, deflate，這告訴我們瀏覽器是可以識別gzip壓縮的，使用gzip壓縮後的文件將大大減小，很多情況下甚至能壓縮70%。對於nginx來說更加簡單了，只需要配置：
gzip on;
gzip_types text/xml text/css text/plain text/javascript application/javascript application/x-javascript;讓我們來看下效果：
可以看出，vendor直接從744K壓縮到了258K，還是很強大的。
2. 路由按需加載
在vue中，資源按需加載有兩個好處，1. 使得app.js更加輕量；2. 只有在請求時才加載對應的資源，而不是打開網站全部加載。具體實現參考我的另一篇博客： 傳送門
3. 圖片、視頻異步加載
可以在文檔渲染結束之後再加載圖片和視頻，例如將圖片的src在vue生命週期中的mounted中賦值，或者通過Image對象緩存文件
4. 瀏覽器緩存
摘抄自：點擊打開鏈接
瀏覽器分爲兩種緩存，強緩存與協商緩存（也被稱爲弱緩存），其中協商緩存不用我們自己配置，下面我們通過連續兩次刷新頁面來觀察一下協商緩存。
如上圖，在第一次的請求中nginx的http響應頭中攜帶了一個Last-Modified: sometime
那麼第二次的請求中瀏覽器的請求頭裏就會攜帶這個時間去對比，當nginx的時間在這個時間之前那麼就說明當前資源並沒有產生變化，返回的狀態碼也會對應的變成304，當瀏覽器收到304後說明緩存的資源並沒有過期，瀏覽器就會去讀取已經緩存好的文件。需要注意的是雖然瀏覽器最終是調用的緩存，但是仍然存在http請求來確認該緩存是否失效，所以很明顯還有另外的一種方式讓瀏覽器可以直接調用緩存，不需要通過http請求，這就是強緩存。強緩存在nginx中可以通過如下代碼配置location ~* \.(css|js)$ {
proxy_set_header Host $host;
proxy_pass http://tomcat_xxx;
expires 7d;
}
location ~* \.(jpg|jpeg|png|gif|webp)$ {
proxy_set_header Host $host;
proxy_pass http://tomcat_xxx;
expires 30d;
}
注意我們這裏使用的是tomcat，你可能需要的配置與我這個並不一樣，但是這並不關鍵，我們主要需要的是expires這項配置，他表示了我們希望緩存的時間，我們配置的js與css緩存時間爲10天，而圖片則緩存30天。一起打開瀏覽器看一下效果。
這裏瀏覽器響應頭中會附帶一個max-age=604800，這裏的單位是秒，換算成天就是我們剛纔設置的7天，再次刷新瀏覽器後狀態碼依然是200但是後面多了一個from memory cache表明此時是從內存中直接取出緩存，並沒有發送http請求，這對一些圖片與我們的依賴包vendor相當有用，我們完全可以給這兩個資源設定一個較大的緩存時間，這樣當用戶訪問第一次後，這些資源始終會保持在用戶的緩存中，就算我們之後更改了很多我們的業務代碼，只要依賴沒有更改，用戶只用加載一些小的業務代碼文件就可以了，對於較大的vendor則依然可以從緩存中獲取。我們可以簡要的總結一下瀏覽器的緩存方式並增加一些注意的點。瀏覽器會首先檢測強緩存，如果命中則直接返回緩存文件，不會發送http請求，如果沒有命中則去檢查弱緩存，當弱緩存命中時返回304狀態碼，瀏覽器依然從緩存中獲取資源，如果弱緩存也沒有命中則返回200狀態碼重新加載服務器上的資源。
注意點：
- 強緩存、弱緩存只是名字上的區別並沒有什麼強弱之分，其實對於一般的瀏覽器來說刷新就會使你當前請求資源的強緩存失效，因爲刷新的時候會請求頭中會攜帶一個
max-age=0或是no-cache，注意我這裏說的當前請求資源指的一般是你頁面的html文檔，但是對於文檔中外鏈的js與img等，不會因爲刷新導致強緩存失效。不過如果你直接請求的是一個js文件，那麼刷新後這個js文件強緩存也會失效。 - 既然強緩存不會發起http請求，那麼服務器資源有變更的情況怎麼辦。其實webpack生成的hash碼就是幫我們解決這個問題用的，當外鏈的app.123456.js變成了app.654321.js瀏覽器自然會重新發起請求，這也提示了我們儘量不要去改變vendor導致vendor的hash變更產生緩存失效的問題。