umi應(yīng)用首屏加載速度提高3倍+（通用性能優(yōu)化）
點(diǎn)擊上方 前端瓶子君，關(guān)注公眾號(hào)
回復(fù)算法，加入前端編程面試算法每日一題群
根據(jù)以往的博客,目前我就司的公司前端框架umi[1], ali出品以路由為基礎(chǔ)的，同時(shí)支持配置式路由和約定式路由，保證路由的功能完備，并以此進(jìn)行功能擴(kuò)展的前端應(yīng)用框架。
問題所在
一直以來我們網(wǎng)站的首頁(yè)加載速度很慢,雖然使用了umi但是我們沒有使用ssr依舊使用的是spa.首屏加載速度在6s左右, 當(dāng)我們看network分析為什么加載速度為什么這么慢，看到一些靜態(tài)資源umi[hash].js占據(jù)的內(nèi)存是3.5M,響應(yīng)速度超過了6s,這只是單純的一個(gè)js文件更何況是一個(gè)spa首屏加載的文件本身來說就很多。
初步思考
期間我想了很多首頁(yè)加載更快的方法, 比如:
-
抽組件 -
壓縮圖片, 為此我還寫了一個(gè)node應(yīng)用前端項(xiàng)目組圖片管理[2] -
還有一些網(wǎng)上的壓縮速度,比如拆分文件使用更小的插件庫(kù)
深入研究
最近在好好研究加載速度的問題，重新梳理network的請(qǐng)求體,發(fā)現(xiàn)最占據(jù)帶寬的就是幾個(gè)靜態(tài)文件,通過Response Header看得出來我們服務(wù)器上面是通過nginx啟動(dòng) 按照道理我們使用了nginx應(yīng)該是有著負(fù)載均衡的,我相信使用過umi-cli或者是任意的cli的同學(xué)應(yīng)該都會(huì)看到打包在服務(wù)器上面響應(yīng)靜態(tài)資源都很大
仔細(xì)分析了看了下請(qǐng)求頭部信息
Request Headers
Accept - Encoding: gzip, deflate
復(fù)制代碼
一直是知道gzip壓縮這個(gè)概念，但是我只在我們這個(gè)網(wǎng)絡(luò)請(qǐng)求req里面看到了gzip，并沒有在res內(nèi)容看到，由于服務(wù)器的部署一直不在前端手上，也不好直接說后端或者運(yùn)維的同學(xué)。
我打開了百度對(duì), 比了下百度的響應(yīng)
Response Headers
Accept - Encoding: gzip, deflate
server: JSP3/2.0.14
Request Headers
accept-encoding: gzip, deflate, br
復(fù)制代碼
由此立馬判斷出來是服務(wù)端的同學(xué)沒有使用nginx做負(fù)載均衡，對(duì)靜態(tài)資源做壓縮,然后去網(wǎng)上搜了下關(guān)于nginx 和 gzip的知識(shí)。這類文章很多，同學(xué)可以自行g(shù)oogle。
解決問題
慶幸本人的權(quán)限夠大，先是拿到了測(cè)試服務(wù)器按照網(wǎng)站的提示開啟gzip
最后我們的Nginx.conf的配置如下
server {
gzip on;
gzip_buffers 32 4 K;
gzip_comp_level 6;
gzip_min_length 100;
gzip_types application/javascript
text/javascript text/css text/xml;
gzip_disable "MSIE [1-6]\.";
#配置禁用gzip條件, 支持正則. 此處表示ie6及以下不啟用gzip（ 因?yàn)閕e低版本不支持）
gzip_vary on;
}
復(fù)制代碼
Tips 很多配置的gzip_types會(huì)少_application/javascript_，但是實(shí)打?qū)嵞銜?huì)發(fā)現(xiàn)網(wǎng)絡(luò)請(qǐng)求中大部分的js文件請(qǐng)求如下：
Content-Type: application/javascript
復(fù)制代碼
這個(gè)很重要,畢竟都2021年了.
配置完成以后,記得重啟nginx,當(dāng)我們?cè)诨剡^頭再來看整個(gè)network請(qǐng)求,之前占據(jù)最大內(nèi)存的umi[hash].js等在size里面大小縮小了近4倍,整體響應(yīng)的速度快了3倍+,這個(gè)數(shù)字真的已經(jīng)可以說基本上算很快的響應(yīng)速度。
總結(jié)
對(duì)于前端來說,客戶端的性能優(yōu)化是前端一直追求的目標(biāo)，那種秒開得到的喜悅。
關(guān)于性能優(yōu)化，個(gè)人感慨要有針對(duì)性的性能優(yōu)化，比如首屏速度/壓縮文件/整合資源，要學(xué)會(huì)觀察請(qǐng)求響應(yīng) - 分析 - 解決問題。
來源：pro-xiaoy
https://juejin.cn/post/6964352706832302117