頁面性能調優

最近利用閒的時間對頁面進行優化,這次不是對項目的代碼進行優化,而是從網絡方面入手,所以不全面。

使用cdn

項目去年就開始使用cdn,所以這次只是進行設置的調整

  1. cdn裏面設置緩存時間,儘可能的長一點(一年)。
  2. 開啓http2,利用http2的特性加快資源的加載(需要先開啓https)。

升級http2

由於部分項目沒有采用cdn,所以還是有必要升級,結果可以是加速兩秒(公司服務器國外,速度較慢),

如何升級

性能測試

使用google的 PageSpeed Insights測試後的到的結果如下

[外鏈圖片轉存失敗(img-5lc6dSG4-1569326017075)(https://github.com/abelce/staticResource/commit/042a284e99f07c68d7540cb3a866bae8bf497048#diff-8230b866d93fd24ec91d48cd1cffc612)]

上圖顯示可以預加載其他模塊的css文件,由於我們使用react的lazy懶加載使得部分css、js需要時纔會加載,這時可以使用preload-webpack-plugin將其css文件添加到head來提前懶加載。

TypeError: HtmlWebpackPlugin.getHooks is not a function

html-webpack-plugin插件版本太低引起,升級到最新版即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章