背景：詳情頁(yè)面First Contentful Paint (FCP)欠佳頁(yè)面比例較大，影響SEO
流程
- 通過(guò)https://pagespeed.web.dev/report?utm_source=psi&utm_medium=redirect&url=https%3A%2F%2Fwww.shenlanbao.com%2Fzhishi%2F5-133984
網(wǎng)頁(yè)性能看板急黎，得出，官網(wǎng)H5端有不少優(yōu)化空間
image.png
image.png
針對(duì)性的進(jìn)行代碼優(yōu)化
-
對(duì)項(xiàng)目中的nuxt.config.js中的build設(shè)置以下屬性
image.png -
執(zhí)行 以下腳本东跪，進(jìn)行項(xiàng)目間包體積的明細(xì)
image.png -
執(zhí)行結(jié)束可以看到包體積大小和占比
image.png
以下就是針對(duì)性的進(jìn)行優(yōu)化
1、刪除輔助插件Vconsole.js
2、刪除element-ui的引入
3歼培、刪除vue-qr
看一下包體積的對(duì)比
image.png
很明顯已經(jīng)減少了很多無(wú)用包的體積
看一下網(wǎng)站測(cè)速頁(yè)面的對(duì)比
刪除無(wú)用依賴之前
image.png
image.png
刪除之后
image.png
image.png
打包提示中部分靜態(tài)資源圖片太大
image.png
優(yōu)化操作：壓縮圖片替換原來(lái)的圖片
優(yōu)化后（剩下三張是公司的獎(jiǎng)項(xiàng)圖亩码，已壓縮過(guò)但還是很大）
image.png
性能診斷跟網(wǎng)速也有很大關(guān)系季率，下圖為周六上班時(shí)的評(píng)分結(jié)果
image.png
