背景

隨著公司業(yè)務(wù)的不斷壯大，最近老是有用戶反應(yīng)公司APP內(nèi)的商城打開比較慢，這可不行啊，慢了容易流失用戶，流失用戶減少公司業(yè)績(jī)，公司業(yè)績(jī)少我的年終獎(jiǎng)就少…………，所以為了公司，也為了自己，開始優(yōu)化之路。

商城系統(tǒng)是去年開發(fā)的，是一個(gè)基于vue2.0的spa項(xiàng)目，最好的優(yōu)化思路當(dāng)然是與原生移動(dòng)端同學(xué)合作將它hybird化，但是這樣時(shí)間周期太長(zhǎng)，改造也太大，而且年后原生移動(dòng)端的同學(xué)也有離職的，導(dǎo)致人手不足，所以只能自己改造。

相關(guān)系列文章：

移動(dòng)spa商城優(yōu)化記（二）--- webpack打包速度優(yōu)化篇

開始

這一篇是首屏優(yōu)化篇，只講首屏優(yōu)化部分，先來看一下首屏完全加載出來長(zhǎng)啥樣，

加載步驟圖

首先從原生app點(diǎn)擊底欄的商城進(jìn)入H5頁(yè)面，此時(shí)瞬間大概長(zhǎng)這樣，

然后經(jīng)過1-2s左右的時(shí)間（無緩存情況）會(huì)看到到下面這個(gè)loading動(dòng)畫，

然后loading2-3s左右完全加載出來

加載總時(shí)長(zhǎng)在3-5s左右。

1.進(jìn)入h5頁(yè)之前的優(yōu)化

此處白屏?xí)r間主要是移動(dòng)端webview初始化以及在加載H5的靜態(tài)資源，此處優(yōu)化點(diǎn)有四個(gè)：

1.全局WebView

方法：

• 在客戶端剛啟動(dòng)時(shí)，就初始化一個(gè)全局的WebView待用，并隱藏；

• 當(dāng)用戶訪問了WebView時(shí)，直接使用這個(gè)WebView加載對(duì)應(yīng)網(wǎng)頁(yè)，并展示。

這種方法可以比較有效的減少WebView在App中的首次打開時(shí)間。當(dāng)用戶訪問頁(yè)面時(shí)，不需要初始化WebView的時(shí)間。

此處需要移動(dòng)端同學(xué)配合。

2.前端代碼打包優(yōu)化

首先，要看看首屏都加載了哪些東西，最主要就是這幾個(gè)，其中app和vendor都有上百k

然后開始分析文件為什么這么大，執(zhí)行

npm run build --report

然后會(huì)看到一張類似這樣的圖（是不是很裝逼~）

（圖是網(wǎng)上找的，并沒有用項(xiàng)目的分析圖，怕被總監(jiān)說泄漏源碼~）

然后，一看vendor.js里面有部分lodash和moment以及第三方的一些插件的包，這都是當(dāng)時(shí)趕進(jìn)度偷懶留的坑啊，于是能手寫的全部自己手寫，去掉第三方一些包的體積。然后再把一些首頁(yè)用不到的包進(jìn)行懶加載，不再放到全局引用。

其他優(yōu)化體積的方法如：

tree-shaking：去除沒用過的代碼

UglifyJsPlugin：壓縮代碼

ExtractTextPlugin：提取css出來

這些在之前就用過了，不在這次優(yōu)化任務(wù)里面，不再細(xì)說，可以自行查閱插件用法。

3.pwa

此處推薦一個(gè)webpack插件offline-plugin，具體用法看這篇文章：

使用offline-plugin搭配webpack輕松實(shí)現(xiàn)PWA

這次用pwa主要是用了它的離線緩存，和http cache緩存一樣，但是相對(duì)來說緩存更可控。

4.loading動(dòng)畫前移

現(xiàn)在只有H5的靜態(tài)資源加載完畢后才會(huì)看到loading動(dòng)畫，H5靜態(tài)資源優(yōu)化的再小中間也是有白屏?xí)r間的，所以我們?cè)谝苿?dòng)端加上了loading動(dòng)畫，而把H5的loading動(dòng)畫去掉換用了骨架屏，具體在下面說。

2.進(jìn)入h5頁(yè)之后的優(yōu)化

此處h5靜態(tài)資源加載完后會(huì)看到loading動(dòng)畫，loading動(dòng)畫時(shí)在做什么呢？請(qǐng)求A接口，A接口返回后請(qǐng)求B接口，B接口返回后請(qǐng)求………此處優(yōu)化點(diǎn)有四個(gè)：

1.骨架屏

一進(jìn)頁(yè)面先加載骨架屏占位，然后再去數(shù)據(jù)填充。

我們骨架屏是自己寫的，也可以用插件

vue-skeleton-webpack-plugin

用法可以看這里：

為vue項(xiàng)目添加骨架屏

2.部分前端請(qǐng)求改為服務(wù)端內(nèi)網(wǎng)請(qǐng)求

比如用戶信息這類接口本來是前端請(qǐng)求完后拿到用戶信息，再拿著用戶信息去請(qǐng)求與用戶相關(guān)的頁(yè)面數(shù)據(jù)，但是有些網(wǎng)絡(luò)不穩(wěn)定的地方接口串行很容易慢，如果一個(gè)超時(shí)了還得再請(qǐng)求一遍，所以這類移到服務(wù)端去做，直接變成內(nèi)網(wǎng)調(diào)用接口，不受客戶端網(wǎng)絡(luò)環(huán)境影響。

3.拆分接口，頁(yè)面分批渲染，部分接口數(shù)據(jù)做localstorage緩存

之前首頁(yè)的數(shù)據(jù)接口為了趕時(shí)間，所有數(shù)據(jù)都是一個(gè)接口返回的，所以后端要查好多表，這次我們把一個(gè)接口拆分為多個(gè)接口，分批加載填充，另外商品分類等這種不太經(jīng)常變化的數(shù)據(jù)前端緩存到localstorage中，一進(jìn)頁(yè)面先去localstorage中拿數(shù)據(jù)渲染，然后再動(dòng)態(tài)更新。

先拿到不用區(qū)別用戶的通用首頁(yè)數(shù)據(jù)，并把可以緩存的緩存起來，下次直接用不走接口。

然后與用戶有關(guān)的數(shù)據(jù)也回來了，再分批渲染上

最終優(yōu)化后的結(jié)果是：

無白屏?xí)r間，原生loading動(dòng)畫1s后看到H5骨架屏，2s之內(nèi)看到所有數(shù)據(jù)加載完成。

整體速度從原來的3-5s優(yōu)化到1-2s之間，有緩存情況可以做到秒開，當(dāng)然還有其他可以優(yōu)化的地方，以后優(yōu)化完了再補(bǔ)充。

首屏優(yōu)化為什么沒用vue-ssr

有同學(xué)評(píng)論問首屏優(yōu)化為啥不用vue-ssr，其實(shí)是該用的，但是公司因?yàn)橛懈匾捻?xiàng)目排進(jìn)來了，金三銀四公司人手不太夠，所以先在舊的基礎(chǔ)上進(jìn)行了優(yōu)化，等抽出時(shí)間會(huì)進(jìn)行服務(wù)端渲染的優(yōu)化，到時(shí)候改完會(huì)再次分享一篇關(guān)于spa遷移ssr的優(yōu)化文章~

最后

其實(shí)性能優(yōu)化沒有公式，還是要根據(jù)具體項(xiàng)目具體分析，每個(gè)項(xiàng)目的可優(yōu)化點(diǎn)及優(yōu)化方式都不一樣，不能只會(huì)死板硬套雅虎軍規(guī)這種公式類優(yōu)化準(zhǔn)則。

這是移動(dòng)spa商城優(yōu)化的第一篇，以后還會(huì)說下有關(guān)此項(xiàng)目的webpack打包速度優(yōu)化，代碼封裝優(yōu)化，動(dòng)畫優(yōu)化等方面的個(gè)人經(jīng)驗(yàn)，如果喜歡就點(diǎn)個(gè)贊吧~。

（文章原創(chuàng)整理，轉(zhuǎn)載請(qǐng)注明出處，謝~）

總結(jié)

以上是生活随笔為你收集整理的移动spa商城优化记（一）---首屏优化篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。