背景

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

商城系統是去年開發的，是一個基于vue2.0的spa項目，最好的優化思路當然是與原生移動端同學合作將它hybird化，但是這樣時間周期太長，改造也太大，而且年后原生移動端的同學也有離職的，導致人手不足，所以只能自己改造。

相關系列文章：

移動spa商城優化記（二）--- webpack打包速度優化篇

開始

這一篇是首屏優化篇，只講首屏優化部分，先來看一下首屏完全加載出來長啥樣，

加載步驟圖

首先從原生app點擊底欄的商城進入H5頁面，此時瞬間大概長這樣，

然后經過1-2s左右的時間（無緩存情況）會看到到下面這個loading動畫，

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

加載總時長在3-5s左右。

1.進入h5頁之前的優化

此處白屏時間主要是移動端webview初始化以及在加載H5的靜態資源，此處優化點有四個：

1.全局WebView

方法：

• 在客戶端剛啟動時，就初始化一個全局的WebView待用，并隱藏；

• 當用戶訪問了WebView時，直接使用這個WebView加載對應網頁，并展示。

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

此處需要移動端同學配合。

2.前端代碼打包優化

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

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

npm run build --report

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

（圖是網上找的，并沒有用項目的分析圖，怕被總監說泄漏源碼~）

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

其他優化體積的方法如：

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

UglifyJsPlugin：壓縮代碼

ExtractTextPlugin：提取css出來

這些在之前就用過了，不在這次優化任務里面，不再細說，可以自行查閱插件用法。

3.pwa

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

使用offline-plugin搭配webpack輕松實現PWA

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

4.loading動畫前移

現在只有H5的靜態資源加載完畢后才會看到loading動畫，H5靜態資源優化的再小中間也是有白屏時間的，所以我們在移動端加上了loading動畫，而把H5的loading動畫去掉換用了骨架屏，具體在下面說。

2.進入h5頁之后的優化

此處h5靜態資源加載完后會看到loading動畫，loading動畫時在做什么呢？請求A接口，A接口返回后請求B接口，B接口返回后請求………此處優化點有四個：

1.骨架屏

一進頁面先加載骨架屏占位，然后再去數據填充。

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

vue-skeleton-webpack-plugin

用法可以看這里：

為vue項目添加骨架屏

2.部分前端請求改為服務端內網請求

比如用戶信息這類接口本來是前端請求完后拿到用戶信息，再拿著用戶信息去請求與用戶相關的頁面數據，但是有些網絡不穩定的地方接口串行很容易慢，如果一個超時了還得再請求一遍，所以這類移到服務端去做，直接變成內網調用接口，不受客戶端網絡環境影響。

3.拆分接口，頁面分批渲染，部分接口數據做localstorage緩存

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

先拿到不用區別用戶的通用首頁數據，并把可以緩存的緩存起來，下次直接用不走接口。

然后與用戶有關的數據也回來了，再分批渲染上

最終優化后的結果是：

無白屏時間，原生loading動畫1s后看到H5骨架屏，2s之內看到所有數據加載完成。

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

首屏優化為什么沒用vue-ssr

有同學評論問首屏優化為啥不用vue-ssr，其實是該用的，但是公司因為有更重要的項目排進來了，金三銀四公司人手不太夠，所以先在舊的基礎上進行了優化，等抽出時間會進行服務端渲染的優化，到時候改完會再次分享一篇關于spa遷移ssr的優化文章~

最后

其實性能優化沒有公式，還是要根據具體項目具體分析，每個項目的可優化點及優化方式都不一樣，不能只會死板硬套雅虎軍規這種公式類優化準則。

這是移動spa商城優化的第一篇，以后還會說下有關此項目的webpack打包速度優化，代碼封裝優化，動畫優化等方面的個人經驗，如果喜歡就點個贊吧~。

（文章原創整理，轉載請注明出處，謝~）

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。