這(zhè)份文(wén)字是(shì)根據近(jìn)期團隊做(zuò)來(lái)問β₽(wèn)丁香醫(yī)生(shēng) SPA 和(hé) 丁香醫(±€♠★yī)生(shēng)小(xiǎo)程序 加載速度優化(huà)的(de)經曆整理(lǐ)而‌≤₩成。

效果

古人(rén)有(yǒu)一(yī)句話(huà)叫做(zuò)：治感冒看(kàn)療γφ¥✔效。既然是(shì)關于速度優化(huà)的(de)，我們就(jiù)先來(lái)∑¶β∏看(kàn)一(yī)下(xià)優化(huà)的(de)效果。

來(lái)問(wèn)丁香醫(yī)生(shēng)

Chrome Network

選取了(le)訪問(wèn)量較大(dà)的(de)首頁和(hé)我的(de)頁面進行(xí↕<&Ωng)随機(jī)取樣，通(tōng)過下(xià)圖可(kě)以看(kàn)到(dào)首₹×∏§頁的(de)加載時(shí)間(jiān)從(cóng) 5.1s 下(xià)降β•到(dào) 1.67s，我的(de)頁面從(cónδβ✔™g) 2.92s 下(xià)降到(dào) 1.82s。

mta

2018.01.02 早上(shàng)的(de)頁面響應速度數(shù↕φ)據，目前國(guó)內(nèi)各省份平均加載速度在 0.99~2s（雖然沒有(yǒδ±‍¥u)達到(dào) 1s 內(nèi)加載，但(dàn)是(shì)以目前業φ£→(yè)務量級，這(zhè)樣的(de)速度是(shì)可(kě)以被©¥₩δ接受的(de)）：

前者這(zhè)是(shì) Google 的(deφ♦↕)一(yī)個(gè)評分(fēn)工(gōng)具，最開(kāi)始做(zuò)優化✘↓α∑(huà)時(shí)用(yòng)它測了(le)一(yī)些(♦¶<xiē)頁面的(de)分(fēn)數(shù)。後來(láiα¶Ω$)發現(xiàn)了(le)後面這(zhè)些(xiē) Chrome 插件(jiàn)。€↔讓我困惑的(de)是(shì)同樣的(de)頁面這(zhè)幾Ωλε個(gè)工(gōng)具給出的(de)結果分(fēn)數(shù)都(dōu)不(bù)一(α♦​yī)樣。手淘 的(de)首屏加載速度挺快(kuài&<↕₹)的(de)，但(dàn)是(shì)跑出來(lái)的(de)分(fēn)數(sh✘∑ε→ù)也(yě)不(bù)高(gāo)。最終我隻是(shì)選擇☆↔↕←性的(de)參考一(yī)下(xià)工(gōng)具給出來(lái)的(de)建議(yì)，←∏↔<忽視(shì)了(le)其給出的(de)評分(fēn)。

丁香醫(yī)生(shēng)小(xiǎo)程序

對(duì)于小(xiǎo)程序，做(zuò)了(le♠↔↑✘)優化(huà)後得(de)到(dào)部門(mén<×↔↕)同學的(de)反饋是(shì)這(zhè)樣的(de)：

具體(tǐ)的(de)數(shù)據指标如(rú)何呢(ne)？雖然目前沒&₹ε有(yǒu)特别好(hǎo)用(yòng)的(de)性能(néng)檢測方式（包括官方提供的(®♦✔de)性能(néng)檢測工(gōng)具在內(nèi)>σ），最終我們組的(de)舒哲同學還(hái)是(shì)利用(y±"♦òng)官方提供的(de)工(gōng)具做(zuò)了(le)一(yī)下¥σ(xià)簡單的(de)數(shù)據對(duì)比，數(shù)據如(rú)下(xià)：☆✘

在不(bù)影(yǐng)響産品需求正常叠代的(de)前提下(xià)，兩個(gφ≠&è)項目的(de)優化(huà)斷斷續續持續了(le₽©)兩周。整體(tǐ)上(shàng)來(lái)說(shuō)，本次優化(huà✘§)的(de)性價比還(hái)是(shì)較高(gāo)的(de)。

為(wèi)什(shén)麽做(zuò)加載速度優化(huà)？♦φ

直接原因很(hěn)簡單：慢(màn)。雖然說(shuō)頁面加載速度并沒'γ 有(yǒu)達到(dào)慢(màn)的(de)讓人(rén)無法忍受，但(dà↕¶•n)至少(shǎo)沒辦法讓人(rén)說(shuō)加載§¶Ω&很(hěn)快(kuài)。

既然明(míng)知(zhī)道(dào)加載速度不(bù)快(kuài)，那(nà)之₹©前在幹什(shén)麽？為(wèi)什(shén)麽不(bù₽¶" )早早的(de)去(qù)做(zuò)優化(huà)呢(ne↓&‍σ)？

這(zhè)是(shì)一(yī)個(gè)好(hǎo)問(wèn)題，我曾經在深夜中問σ✔(wèn)過自(zì)己多(duō)次。我給自(zì)己©$的(de)答(dá)案是(shì)：首先，要(yào)承認自(zì)身(shēn)技(jì)‍‌×>術(shù)水(shuǐ)平和(hé)經驗的(de)✘≤限制(zhì)，如(rú)果是(shì)一(yī)個(gè)在前端戰場(chǎng)上(shàγ‍αng)身(shēn)經百戰的(de)人(rén)一(yī)直在負責項目的(de)叠•£ 代，或許情況會(huì)比優化(huà)前好(hǎo)一(yī)些(xiē)。 其次，之前整•φ♥個(gè)産品線的(de)項目一(yī)直處于探索和(h≥ ®é)快(kuài)速叠代中，前端研發資源基本上(shàng)總是(shì)處在被需求‌λ€♠排滿的(de)狀态下(xià)，産品需求快(kuài)速上→ ™β(shàng)線的(de)優先級是(shì)最高(gāo)的(de)。正是(shì)因為₩ ‌(wèi)産品的(de)整體(tǐ)節奏稍微(wēi)放(fàng)緩了(¶‌☆le)一(yī)些(xiē)，才讓研發資源有(yǒu)精力來(lái)做(zuò)一(yī)些≠¥λ±(xiē)優化(huà)。

為(wèi)什(shén)麽說(shuō)是(shì)前端響應速度≤♠λ優化(huà)，而不(bù)是(shì)前後端？

因為(wèi)我是(shì)親眼看(kàn)著(zhe)這(zhè)兩個(gè)項目逐漸長(chá♣♣ng)大(dà)的(de)，單從(cóng)前端工(gōng)程的(de)角度來(láiβ∞•)審視(shì)，在自(zì)己的(de)認知(zhīδ↕)範圍內(nèi)，早就(jiù)認為(wèi)項目中有(yǒu)一(yσ♠★>ī)些(xiē)地(dì)方是(shì)需要(yào)優化(huà)的(de)。堅定了(l>₩‌♥e)先從(cóng)前端動手的(de)想法，是(shì)因≥‌∞→為(wèi)讀(dú)了(le)《高(gāo)性能(néng)網站(zhàn)建設指南(↔₽★¥nán)》這(zhè)本書(shū)，書(shū)中提到(dào)了(le)→∏£α一(yī)個(gè)性能(néng)黃(huáng)金(jīn)法則（Performanc←®♦e Golden Rule）：隻有(yǒu) 10% ~ 20% 的(de)最↕→✘終用(yòng)戶響應時(shí)間(jiān)是(shì)花(huā)在下(xià)載 HTML☆☆ 文(wén)檔上(shàng)。話(huà)說(shuō)到(dào)這(zhè←φ ​)個(gè)份上(shàng)，還(hái)猶豫什(shén)麽呢(ne)，先從€λ&(cóng)前端項目開(kāi)始撸起袖子(zǐ)加÷±<₽油幹吧(ba)。

之前去(qù) Qcon 等技(jì)術(shù)大(dà)會(huì∏☆₹)上(shàng)，聽(tīng)過幾次關于加載速度的♣λ✔&(de)分(fēn)享。比如(rú)：使用(yòng) HTTP2，整站(zhàn)級别的(d←≈♥↕e)前後端優化(huà)等。方案确實是(shì)好(hǎo)的(de)方案，λ₹但(dàn)具體(tǐ)是(shì)否要(yào)應用(¥>yòng)到(dào)自(zì)己團隊實際項目中，還(hái)得(de)根據執行(xíng♣β)成本、團隊技(jì)術(shù)儲備等維度從(có∏≠ng)長(cháng)計(jì)議(yì)。

為(wèi)什(shén)麽說(shuō)是(shì)初級？

因為(wèi)深感自(zì)己在前端性能(néng)優化(huà)這(zhè)個β←∞(gè)領域還(hái)有(yǒu)很(hěn)長(chá≠δng)的(de)路(lù)要(yào)走。

如(rú)何做(zuò)的(de)？

前戲這(zhè)麽長(cháng)，終于可(kě)以開(kāi)始了(le)。

來(lái)問(wèn)丁香醫(yī)生(shēng) SPA

先看(kàn)圖（綠(lǜ)色部分(fēn)為(wèi)已在項目中應用(yòε★γ↑ng)的(de)方法）：

實現(xiàn)遊客機(jī)制(zhì)

最初來(lái)問(wèn)丁香醫(yī)生(shēng)是(s✘∏hì)基于微(wēi)信服務号做(zuò)的(de)，當時(shí)的(de)設計(jì)是(sh γ→₽ì)用(yòng)戶通(tōng)過服務号菜單進入應用(yòng)時(♠★shí)，會(huì)自(zì)動幫他(tā)進行(xíng)跳(tiào)轉登錄☆γ↓§，登錄成功後服務端再重定向回到(dào)應用(yòng)。登錄這(zhè)個(g✘←è)環節，雖然與項目代碼層面的(de)加載優化(huà)關系不(bù)大(dà)，但(dàn)是(±φ​¥shì)從(cóng)用(yòng)戶體(tǐ)驗的(de)角度這(zhè)樣的(de)流程★£$®是(shì)不(bù)好(hǎo)的(de)。因為(wèi)相(xiàng)比于直接打開(k∏₩āi)頁面，用(yòng)戶需要(yào)等更長(cháng)的(de)時(shí)間(jiān)™><∏，并且會(huì)看(kàn)到(dào)兩次頁面加載的(de)進度條。從 π♦(cóng)産品的(de)角度，一(yī)些(xiēα↕♠€)頁面是(shì)不(bù)需要(yào)用(yòng)戶登錄即‍$₩可(kě)訪問(wèn)的(de)。綜上(shàng)，将登錄流程後置，讓∑∑用(yòng)戶可(kě)以直接進入應用(yòng)這(zhè)件∏≤™(jiàn)事(shì)情，于情于理(lǐ)都(dōu)是(shì)必須要(yào)做(zuò​§)的(de)。

改造流程大(dà)緻為(wèi)：梳理(lǐ)産品現(xià∏₩ πn)有(yǒu)流程 -> 用(yòng)戶進入應用(yòng)時(shí£φ✔)取消強制(zhì)登錄 -> 在産品流程核心環節進行(₹λ∞₽xíng)用(yòng)戶登錄狀态判斷并引導登錄。具體(tǐ)實現←​(xiàn)細節不(bù)再贅述。

減小(xiǎo)資源包體(tǐ)積

實現(xiàn)了(le)遊客機(jī)制(zhì)後，接下(xià)來(★>lái)就(jiù)是(shì)對(duì)應用(yòng)的(de)資源包動手了(l'Ωβ∞e)。因為(wèi)通(tōng)過 Chrome 開(kāi)發者工(gōng)具的(d≠α ©e) Network 可(kě)以看(kàn)出，下(xià)載 CSS、J<★β↕S 資源還(hái)是(shì)占用(yòng)了(le γ∏≠)不(bù)少(shǎo)時(shí)間(jiān)的(de)。下(xià)圖是(shì)減∞→小(xiǎo)資源包體(tǐ)積之前的(de)情況：

優化(huà)前包體(tǐ)積大(dà)小(xiǎo)-Gzippe™‍d

精簡第三方依賴

想要(yào)減少(shǎo)資源體(tǐ)積大(dà)小(xiǎo)，首先需要(yào♦¶)知(zhī)道(dào)哪些(xiē)資源時(shí)應該/可(kě)以被删除的↑‌Ω (de)。由于項目是(shì)基于 Webpack 構建的(dσ ♣e)，因此可(kě)以使用(yòng) Webpack Bundle Anal¶&σ♥yzer 進行(xíng)分(fēn)析Web♦≥&pack 生(shēng)成的(de)包體(tǐ)組成。然後™∑"根據實際情況進行(xíng)移除就(jiù)好(hǎo)。

精簡了(le)第三方依賴後，啓動應用(yòng)時(shí)需要(yào)下(xià) →γ≤載的(de)資源體(tǐ)積還(hái)是(shì)挺大(dà)的(de∑×)。此時(shí)就(jiù)需要(yào)使用(yòng) Webpack 的(de↑∏)代碼分(fēn)離(lí)和(hé)懶加載進行(xíng)進一(yī)步的(de)優£←¥化(huà)。

代碼分(fēn)離(lí)

代碼分(fēn)離(lí)的(de)思想就(jiù)是(shì)化(huà)整為(wèi)零，将↔α♦→代碼分(fēn)離(lí)到(dào)不(bù)同的(de) bundle 中，然 ¶‍§後可(kě)以按需加載或并行(xíng)加載這(zhè)些(xiē)小☆♦€<(xiǎo)的(de) bundle 文(wén)件(jiàn)♥​≥₹。

代碼分(fēn)離(lí)主要(yào)是(shì)利用(yòng)‍σ>≥ Webpack 的(de)動态導入

Webpack 目前有(yǒu)三種常用(yòng)的(λ♦∑de)代碼分(fēn)離(lí)方法：

• 入口起點：使用(yòng) entry 配置手動地(dì)分(fēn)離(lí)代碼。λ¥€‍（優勢：簡單、直觀。劣勢：配置繁瑣、同一(yī)份代碼可(kě)能(né γng)會(huì)被引入到(dào)各個(gè) bundle 中、不(bù)靈活，并不(>∑©bù)能(néng)将核心應用(yòng)程序邏輯進行(xíng↔₹)動态拆分(fēn)代碼）
• 防止重複：使用(yòng) CommonsChunkPlugin 去(↕₹Ωqù)重和(hé)分(fēn)離(lí) chunk。
• 動态導入：通(tōng)過模塊的(de)內(nèi)聯函數(shù)調用(yòng"✔)來(lái)分(fēn)離(lí)代碼。

經過對(duì)比之後，最終選擇了(le)動态導入的(de)方式。

動态導入(dynamic imports)

webpack 提供了(le)兩個(gè)類似的(de)技(jì)術(£★shù)：

• import() 語法（推薦，符合 ECMAScript 提案）
• require.ensure（webpack 欽定）

示例

// 分(fēn)離(lí) lodash
async function getComponent() {
    const _ = await import(/* webpackChunkName: "lodash" */® ₽ 'lodash');
}

懶加載

懶加載是(shì)在代碼分(fēn)離(lí)的(de)基礎上(sh¥↔àng)更近(jìn)了(le)一(yī)步。

雖然我們可(kě)以将代碼進行(xíng)代碼分(fēn)離(lí)，但(dàn)代碼分(fēn)​γ£離(lí)後的(de) bundle 隻是(shì)加載的(de)優先級會(huì)§¥ ≈不(bù)同，最終還(hái)是(shì)會(huì)加載，但(dàn)實× ↓♠際情況是(shì)某些(xiē)代碼在用(yòng)戶進行(xí♣€™ng)某項操作(zuò)之前是(shì)不(bù)需要(yào)加載的(de)。比如(rú)：§≠個(gè)人(rén)信息編輯頁面有(yǒu)一(yī)個∏∑™ε(gè)用(yòng)戶修改頭像功能(néng)，對(duì)于用(yòng±₹α)戶來(lái)說(shuō)，即使他(tā)進入了(le)個(gè)∑₹÷人(rén)信息編輯頁面，在他(tā)未點擊上(shàng)傳按鈕之前，用(yòng)于上(sh←γ≤àng)傳頭像的(de)代碼是(shì)沒必要(yào&±πα)加載的(de)。

Vue-Router 結合 Vue 的(de)異步組件(jiàn)和(hé) γ'∏✔Webpack 的(de)代碼分(fēn)割功能(néng)，實現(xiàn∞λ"γ)了(le)路(lù)由組件(jiàn)的(de)懶加載。

在經過精簡依賴、代碼分(fēn)離(lí)和(hé)懶加載之後，項π♠目的(de)資源包體(tǐ)積大(dà)小(xiǎo)如(rú)下(xià)圖'∑✔ ：

Gzipped：

用(yòng)戶進入首頁需要(yào)加載的(de) js 資源從(c'✔∏§óng) vendor.js 、 main.js 和(hé) chunks 共 672.84kb 變為(wèi)隻需要(yào)加載一(yī)個∑<×☆(gè) 186kb 的(de) main.js 。

複用(yòng) Store 數(shù)據以減少(shǎo)網絡請(qǐng)求數(s>™hù)量

來(lái)問(wèn)丁香醫(yī)生(shēng)是(shì)基于Vue.js 全家(ji↑¶ā)桶實現(xiàn)的(de)，狀态管理(lǐ)用(yòng)的(de)是(shì ≠•)Vuex。

之前的(de)實現(xiàn)中，有(yǒu)些(xiē)功能(néng)♣↑實現(xiàn)沒有(yǒu)很(hěn)在意 Store 數(shù)據的(de)複用(yòng)。比如₽•(rú)：從(cóng) A 頁面進入 B 頁面後再返回 A 頁面 >™♣時(shí)，會(huì)再去(qù)獲取端獲取一(yβ→ī)次 A 頁面需要(yào)的(de)數(shù)據。這(zhè)種處理(lǐ)不(bγ≥ù)僅僅是(shì)多(duō)發了(le)不(bù)必要(yà×↓o)的(de)請(qǐng)求，如(rú)果在請(qǐng)求過程中做±™→↔(zuò)了(le)一(yī)些(xiē)頁面級别加載中的(de)處理(lǐ)♣≈∞，那(nà)麽每次切換頁面時(shí)都(dōu)會(huì♣↑♣)讓用(yòng)戶看(kàn)到(dào) loading 效果，這(zhè)也(yδ∏ě)會(huì)讓人(rén)覺得(de)加載慢(m∏♥ε∞àn)。既然用(yòng)了(le)狀态管理(lǐ)，那(€±₹nà)麽就(jiù)應該把他(tā)利用(yòng)好(hǎo)才是(≈Ωshì)。

本次優化(huà)過程中的(de)數(shù)據複用(yòng)，主要(yào)是(s§∏hì)在部分(fēn)請(qǐng)求 action 之前增加邏輯判斷，如(rú)果 Store 中有(yǒu)當前操作(zuò)需要(yào)的(de)數(shù)據，♦λ₩則不(bù)再調用(yòng) action 。

前後端徹底分(fēn)離(lí)

關于這(zhè)一(yī)點會(huì)再寫一(yī)篇文(wén)章(zhāng)進行(x↔£×íng)闡述。

丁香醫(yī)生(shēng)小(xiǎo)程序

老(lǎo)規矩，先看(kàn)圖：

圖片資源

最開(kāi)始做(zuò)小(xiǎo)程序時(sh®§♦í)，是(shì)把所有(yǒu)圖片資源 base64 § 後進行(xíng)使用(yòng)的(de)，這(zhè)導緻了(le)所有(•®‍βyǒu)圖片資源最終都(dōu)被打包到(dào)小 ∑(xiǎo)程序的(de)安裝包中。所以做(zuò)小(xiǎo)程≥↑序的(de)加載速度優化(huà)的(de)第一(yī)步，就(¥✘ ®jiù)是(shì)把一(yī)些(xiē)體(tǐ)積較大(dà©"€↕)的(de)圖片資源改為(wèi)使用(yòng)線上(shàng)資源≥≤Ω。具體(tǐ)做(zuò)法是(shì)将素材先上(shàng)傳到(dào) cd∏ n，然後在小(xiǎo)程序中直接使用(yòng)線上(sδ€♠hàng)圖片地(dì)址。

登錄鑒權優化(huà)

原本小(xiǎo)程序的(de)登錄是(shì)我們自(¶®≤zì)己實現(xiàn)的(de)一(yī)套登錄方案，核心是(shì)前後端一(yī)起維護‍↑ ★一(yī)個(gè)類似于 SessionId 的(de) ID。服務端對(duì)于這(zhè)個(gè) ID 是(s™ε∏‍hì)設置了(le)有(yǒu)效期的(de)，而之前前端的(de)實現(xiββ↓εàn)是(shì)每次用(yòng)戶啓動小(xiǎo)程序，都(dōu)直接去(qù)請(qǐ©≠←ng)求公司的(de) SSO 獲取一(yī)個(gè)新的(de) ID，沒ε§有(yǒu)在意本地(dì)的(de) ID 是(shì)否過期。

優化(huà)的(de)點在于在應用(yòng)啓動時(shí)，增加對(duì •∞∏) ID 有(yǒu)效期的(de)判斷，從(cóng)而避免每←λ ↔次用(yòng)戶啓動都(dōu)需要(yào)發請(qǐng)求獲取新的( ♥de) ID。

預渲染

之前在小(xiǎo)程序所有(yǒu)需要(yào)從(cóng)服務端獲取數(shù)₩δ≤據的(de)頁面，都(dōu)實現(xiàn)了(le)一(yī)個≥ελ(gè)加載中的(de)效果，即請(qǐng)求未返↑​δ&回結果時(shí)，整個(gè)頁面用(yòng)戶隻會(huì)∞₽看(kàn)到(dào)一(yī)個(gè)加載中的(de)菊花(huā)。如(rú)≈φ™Ω果某頁面隻有(yǒu)服務端提供的(de)元數(shù)據級别接口，沒有(yǒφΩu)業(yè)務接口，并且接口返回的(de)數(shù)據是(λ←&shì)有(yǒu)依賴關系的(de)，那(nà)麽用(yòng)戶等待的(de)時(sφ₹hí)間(jiān)會(huì)大(dà)大(dà)加長(cháng)。

仔細思考會(huì)發現(xiàn)，其實是(shì)沒有(yǒu)必要(yàoσ÷)等所有(yǒu)接口數(shù)據回來(lái)後再給用(yòng)戶呈現(xiàn)完整§♥☆≥頁面的(de)。

最終的(de)優化(huà)方案分(fēn)為(wè¥♠λi)兩種：一(yī)種是(shì)取消加載中效果，先給用(yòng)戶呈現(xiàn)完整的(→↓λde)利用(yòng)本地(dì)數(shù)據渲染好(hǎo)★∑₽★的(de)頁面，等接口返回數(shù)據後在進行(xí&↕ng)頁面視(shì)圖的(de)更新；另外(wài)一(yī)種方案是↕λβ•(shì)取消加載中效果，但(dàn)是(shì)不 α∏¥(bù)做(zuò)本地(dì)數(shù)據渲染，而是(shì)  ×↔直接給用(yòng)戶看(kàn)到(dào)部分(fēn)靜δ γ'(jìng)态頁面。

分(fēn)包加載

關于分(fēn)包加載，就(jiù)老(lǎo)老(lǎo)實實的(de)按照(zhào)官方₽♥®β文(wén)檔做(zuò)就(jiù)好(hǎo)了(le)。進行(xíng)分(fēn)包後≤•δ∞的(de)效果還(hái)是(shì)很(hěn)不(bù)錯Ω∞₹(cuò)的(de)。具體(tǐ)效果可(kě)以參考文(wén)章(zhāng)開(kāi)頭♠₹的(de)數(shù)據統計(jì)。

目前上(shàng)述方案中，效果比較明(míng)顯的(de)是(×₹shì)預渲染和(hé)分(fēn)包加載。一(yī☆ )個(gè)是(shì)視(shì)覺上(shàng)讓÷₩​用(yòng)戶覺得(de)快(kuài)了(le)，一(​←✔yī)個(gè)是(shì)真真切切的(de)把首次加載的(de)資源包₹>×變小(xiǎo)了(le)。