# 你的 JS 該減肥了！5個提升網頁載入速度的技巧 ／ Shubo（趙勗博）

{%hackmd @ModernWeb/HkqZxb98v %}

### [簡報下載](https://s.itho.me/modernweb/2020/Slides/d502.pdf)

> 共筆從這開始

> [前端工程師都該懂的6個網頁載入加速技巧 (加速 30% 真實案例分享) | Shubo’s Notes](https://shubo.io/optimize-loading-speed/)

## 1. 優化網頁載入速度
### 為什麼要加快載入速度
* 載入速度 = 使用者體驗
* 根據 Amazon 內部統計，慢 100ms = 營收減少 1%
* SEO

### 第一步：善用測速工具
* [Google PageSpeed Insight](https://developers.google.com/speed/pagespeed/insights/)

### 如何決定優化的優先順序
* 修正以後改善最多的項目
* 業務範圍中最容易改動的部分
* 先做出成果，得到主管信任，爭取更多優化空間
* 例：優化圖片尺寸，涉及 app 上傳 / 後端處理
* 例：優化 JavaScript bundle 體積，前端可自己修改 build 設定 (優先優化圖片尺寸)

## 2. 我的JS很肥會怎樣嗎?
### 瀏覽器運作原理
* 結論： JS bundle 越大，網頁載入越慢
* 瀏覽器：解析 HTML > 建立 DOM TREE > 渲染頁面
* JS "blocks" DOM tree 的建立過程
* 下載 + 執行 JS 越慢，block 越久，越慢渲染畫面

### Code Splitting
* 將單一JS檔案拆分成許多小塊
* 平行載入
* 有需要時才載入
* 各自可被快取

## 3. 拆分出Vendor Bundle
* Webpack runtime and manifest: 負責模組之間互動，體積可忽略不計
* Application Bundle: UI / 商業邏輯，經常變動
* Vendor Bundle: 第三方套件 / node_modules，不太變動

### Why Vendor Bundle?
* 通常變動不頻繁
* **可被快取**
* 此配置在有 cache 情況下載入更快

### 未優化Bundle的規劃

| | 桌機版 | 手機版 | 說明 |
| -------- | -------- | -------- | -------- |
| arcade.js | 585KB | 426KB | 商業邏輯 |
| omlib.js | 205KB | 205KB | 內部 lib/ API |
| vendor.js | 366KB | 366KB | 第三方套件|
| sum | 1156KB | 997KB | |

### 運用工具分析配置是否合理
* 運⽤ webpack-bundle-analyzer 作視覺化分析
* application bundle
* 裡⾯有 node_modules
* 併入 vendor bundle 更好

### 取出 Vendor bundle
* 將 node_modules 統一打包成 vendor.js
* 結果

| | 桌機版 | 手機版 | 說明 |
| -------- | -------- | -------- | -------- |
| arcade.js | ~~585KB~~ **310KB** | ~~426KB~~ **218KB**| **商業邏輯** |
| omlib.js | **205KB** | **205KB** | **內部 lib/ API規格** |
| vendor.js | ~~366KB~~ **632KB**| ~~366KB~~ **632KB** | **第三方套件** |
| sum | 1156KB | ~~997KB~~1055KB* | |

> 效果：減少 application bundle 的⼤⼩，加快再訪者載入速度

## 4. Dynamic Loading
* 對新用戶而言，網站整體大小不變
* 如何減少整體下載量？動態下載需要的模組
* ⽤到某段程式碼的時候才透過網路下載 JS bundle

### ESM import()
* Webpack 支援 ESM import() 語法實現 dynamic import

### 根據路徑做 Dynamic Import
* 為何根據路徑？
* GA數據顯⽰使⽤者⼤多停留在熱⾨⾴⾯，換⾴次數少
* react-router ⽀援 dynamic import

| | 桌機版 | 手機版 | 說明 |
| -------- | -------- | -------- | -------- |
| arcade.js | ~~310KB~~ **235KB** | ~~218KB~~ **189KB**| **商業邏輯** |
| omlib.js | **205KB** | **205KB** | **第三方套件** |
| vendor.js | **632KB**| **632KB** | **內部 lib/ API規格** |
| sum | ~~1156KB~~ 1072KB* | ~~1055KB~~ 1026KB* | * 體積最⼤的⾸⾴~20KB |

> 效果：減少 application bundle 下載量

### 對肥大套件做 Dynamic import
* 哪些套件適合 dynamic import?
* 很肥大
* 使用頻率低
* eg. JSZip (27KB), moment.js (64KB), request (70KB), hls.js (77KB)
* 結果

| | 桌機版 | 手機版 | 說明 |
| -------- | -------- | -------- | -------- |
| arcade.js | **235KB** | **189KB** | **商業邏輯** |
| omlib.js | **205KB** | **205KB** | **內部 lib/ API規格** |
| vendor.js | ~~632KB~~ **267KB**| ~~632KB~~ **267KB** | **第三方套件**|
| sum | ~~1072KB~~ 784KB* | ~~1026KB~~ 707KB* | * 以使⽤頻率最⾼的⾸⾴為例 |

> 效果：⼤幅減少整體下載量

## 5. Tree-Shaking
* 將沒有用到的程式碼從 JS bundle 中移除
* 必須使用 ESM import/export (靜態結構)

### 如何設定 Tree-shaking
* 將專案中 CommonJS 的 require/module.exports 語法改寫成 ES Module 的 import/export 語法
* 在 package.json 中標示具有 side effets 的模組(例如CSS)
* 結果
* 

| | 桌機版 | 手機版 | 說明 |
| -------- | -------- | -------- | -------- |
| arcade.js | **235KB** | **189KB** | **商業邏輯** |
| omlib.js | ~~205KB~~ **87KB** | ~~205KB~~ **87KB** | **內部 lib/ API規格** |
| vendor.js | **267KB**| **267KB** | **第三方套件**|
| sum | ~~784KB~~ 666KB* | ~~707KB~~ 589KB* | |
> 效果：⼤幅減少整體下載量

## 6. 其他小技巧
### 第三方套件使用 CDN 版本
* 經常被使用的第三方套件 eg. React/jQuery
* 容易被快取
* react-dom: 36KB

### 使用 preset-env 減少 Polyfill 體積
* Polyfill: 讓舊的瀏覽器也能支援新的 API
* preset-env: preset-2015 的加強版
* preset: babel-loader的語法 plugin 集合
* 根據支援瀏覽器清單，自動引入polyfill
* 結果：~~31KB~~ 18KB
* 最終結果

| | 桌機版 | 手機版 | 說明 |
| -------- | -------- | -------- | -------- |
| arcade.js | ~~585KB~~ **235KB** | ~~426KB~~ **189KB** | **商業邏輯** |
| omlib.js | ~~205KB~~ **87KB** | ~~205KB~~ **87KB** | **內部 lib/ API規格** |
| vendor.js | ~~366KB~~ **267KB**| ~~366KB~~ **267KB** | **第三方套件**|
| sum | ~~1156KB~~ 666KB(-43%) | ~~997KB~~ 589KB* (-41%)| |

> 根據 GA 數據，平均載入所需時間減少 30%

## 結論
* 拆分出 vendor bundle
* 根據路徑做 dynamic import
* 對肥大第三方套件做 dynamic import
* 使用 tree shaking 移除沒用到的程式碼
* 熱門第三方套件使用 CDN 版本
* 使用 preset-env 減少 Polyfill 體積

###### tags: `MW20` `維運與測試` `負載平衡`