極致 Web 性能 —— SPA 性能指南
前端框架時代，為開發體驗、效率與頁面性能帶來，非常大的革命。大家紛紛拿起一系列打包工具(webpack/parcel etc.)，配合一系列加載器快速搭建起一個 SPA 頁面。
SPA 應用帶來的好處非常明顯；
- 提升頁面切換體驗
- 降低切換時間
- 易於部署&前後端分離
但是也帶來一系列性能問題：
- 初始加載腳本較大
- 首屏空白時間較長
- 頁面返回時，數據被動重新拉取
這些問題是使用 SPA 模式不可避免的，通過了解 SPA 加載運行過程，可以逐漸看清楚引起性能問題的根本原因，通過精細化應用加載，來解決這些問題。
SPA 之殤
愈發發福
比起一般的簡單頁面，SPA 最大的問題，就是在初始化之時引入大量框架方案腳本，這導致腳本體積隨著項目發展體積愈發增大。
不僅僅是體積
很多人會關註腳本的加載體積，通過一系列方案來提升緩存命中率，減少腳本請求次數。在網絡環境較差的移動端，盡量減少請求時間意義很大。
但這不是銀彈，移動設備對腳本的解析、編譯、執行性能較差（腳本加載參考《圖說舌尖上的腳本》），即便可以完全利用緩存，執行時間也是性能一大瓶頸。
Keep SPA Fit
性能優化原則：貧則獨善其身，富則兼濟天下。
如何維護一個大型 SPA？
隨著項目不斷發展，頁面不斷增加，源源不斷的第三方組件&工具庫加入到Bundle裏面，良好的 SPA 架構可以保證大型 SPA 項目依舊保持極致的性能與體驗。下面介紹一個優秀性能&體驗 SPA 具備的特性：
性能優化
1. 快速啟動 —— 極大提升加載速度（important）
快速啟動應用，並行發起 Bundle 加載&拉取初始數據。相信大家已經發現了，SPA 初始化時候，不得不等待 bundle 返回並執行後，才會發起數據加載。
由於在移動設備上（即便有緩存）bundle 加載極為耗時，我們可以充分利用這段時間將數據進行預加載。這項特性，使得後面的優化起到更加明顯的效果。
如下示例代碼：
| 1 2 | // app.js Promise.all([load(‘bundle‘), load(‘data‘)]) |
2. 根據路由拆分 —— 減少初始加載體積
利用異步加載方式，在路由註冊時提供異步拉取組件的方法，僅在需要進入對應路由時，對應組件才會被加載進來。
| 1 2 3 4 | route({ Home: () => import(‘@/coms/home‘), About: () => import(‘@/coms/about‘) }) |
3. 獨立打包異步組件公共 Bundle —— 提高復用性&緩存命中率
在Home和About等路由裏面，可能公用一套 UI 組件，若不將異步加載公用組件統一打包，每次加載 路由時，都會額外加載一套 UI 組件。通過將公用組件提取打包成Vendor，可以減少下次進入路由加載體積與時間。
BTW：在webpack 時，依舊需要手動維護異步加載組件公用組件。webpack4提供更豐富的異步組件抽離方案。
4. 組件預加載 —— 減少頁面切換時間
當首屏加載完畢後，設備&網絡處於空閑狀態，可以對其他路由組件進行預加載，以便提升頁面切換性能。
預加載是一個非常繁瑣的過程，我們可以設計一個極小啟動器，在頁面渲染後快速預加載後續組件：
| 1 2 | // 所有包含Page的路由組件均會被預加載 boostraper.loadMatch(‘Page‘) |
5. 使用 ESM 語法 —— 按需打包工具庫，降低 Bundle 體積
webpack4在 ESM tree shaking上做了極大優化，使得在引用工具庫時候真正做到”按需打包”，這要求無論是自己開發的工具庫，抑或使用第三方工具庫，打包&使用 ESM 版本非常必要。
6. 配合 PWA 使用，口感更佳 —— 降低首屏渲染時間，極大提升體驗
根據 PWA 緩存策略，可以將訪問的頁面index.html緩存起來，下次打開時候優先利用緩存，再發起請求更新緩存。這使得 SPA 應用幾乎不需要額外時間便可加載應用首屏文檔流。
體驗優化
1. 構建你的極簡Skeleton Page
SPA 首屏加載面臨較長時間白屏，骨架圖是一個完美的”緩兵之計”。在谷歌研究員的文章中有提到，骨架圖對用戶體驗有極大的提升：
- 快速展示
- 配合 PWA 首屏緩存，骨架圖可實現瞬間加載&展示，首屏視覺上有沖擊性地提升
- 穩定加載
- 消除頁面初始加載因多次重繪&資源加載導致的”抖動”
需要註意的是，骨架圖應盡量保持足夠小巧與簡單，以確保不會嚴重影響頁面後續加載。
2. 頁面切換 Loading
無論如何優化性能加載，在頁面切換時候依舊需要獲取頁面數據，若處理不好，可能會在數據返回前有短暫的不友好”空白”。通過以下方式可以很好處理這個問題：
- 友好的切換前 Loading
- 在確保組件&數據加載完畢前，可保證頁面可交互性，減少用戶阻塞感
- 轉場動畫
- 在大多數原生應用，轉場動畫屬於標配
- 即時組件&數據已經完全加載，在切換至新頁面瞬間，依舊需要頁面渲染時間，這段時間可能導致頁面短暫空白或者”視覺阻塞”
- 通過轉場動畫時間，可以很好地緩解這個問題，大多數頁面保證在轉場動畫完畢之後依然渲染完畢
最後
除了上述提到的 SPA 優化方案，Web 性能基礎也是必備的基石（如域名收斂、合理文檔結構）。性能優化本質是一個頁面精細化監控運營的過程，也要求我們對 Web 加載的過程與邏輯有更多的思考與理解。
極致 Web 性能 —— SPA 性能指南