# 程式碼減重：你的 Tree-Shaking 在偷懶嗎？ - SerKo

{%hackmd @JSDC-tw/B1loEcwJZl %}
###### tags: `JSDC2025`

:::warning
本議程不提供錄影
:::

Slido：https://app.sli.do/event/fZfxK1dgDeagJVLSVXufuF

> 開始做筆記

### 簡報連結
https://slides.serko.dev/2025/jsdc/1

只保留有用的程式碼

## what is tree shaking

只留下要的葉子

tree shaking 實現原理

vite 是 以rollup 打包

### 若沒有做**Tree-Shaking 的話:**

1. 體積膨脹、效能差
2. 夾帶開發用的程式碼
3. 機密洩漏

### 實現原理

流程:

1. 建立Graph&AST語法樹：把有 import & export 所用到的檔案與function蒐集
2. 掃描與標記：有呼叫 ≠ 有用 ，呼叫後還需要有使用該變數才會算入
3. Chunk分配、AST渲染輸出：變成只留下有使用的JS檔案

程式碼減重的過程中，他會偷懶

首先例如 commonjs 的話，他就沒有辦法被 tree shaking

common js 是一個 real time

const { add } = require('./lib.cjs')

就可以了，但是放到 funciton 的時候就不行了

commonjs 的 桶文件 不能 tree shaking

解決方式：用 name require、不要放到 function 裡面，不要把 lib 裡面一次 import export

---

## ES module

`export default { add sub }` 就不能 tree shaking

反而可以單純epxport 就好

---

import * as form './lib' 可以嗎？

---
## 小結

為了tree shake 請盡可能使用 ES module

優先考慮使用name import

## what is side effect

如果有一位andy 在外面

則tom jerry 再裡面做事情，應當不會影響andy

在function 做fetch 就是side effect

---

## 打包工具眼中的 Side Effects

1) festch XMLHttpRequest
2) 影響瀏覽器狀態的 EX：console.log localstorage ,history
3) DOM 互動 querySelector
4) Event Loop settimeout setinterval promise queueMicortask
5) Math.random (*1)
6) Json.parse / json.stringify (*2)
7) throw / 任何會 throw 的 API (*2)
8) Object.assign

*1
- 宏觀上是 math random 是 沒有 side effect
- 沒有 side effect 不一定 pure function

*2
- 因為有可能會 throw error，會改變到函式外部

## side Effect 如何影響 trees-haking

### 機密外洩

前端可能包含 後端程式碼
例如用 monorepo 前後端

mate.env 等資料，如果經過會 throw 的函式時，就會被side effect 而無法 tree-shake 造成機密資料外洩!!

zod 是不能被tree shake 掉

### 如何檢測

機密資料如何備檢測？
用 console 特定識別性強的字串，打包完在根據這段字串搜尋，土砲 但好用 !!

到機密文件裡面 去console log 看有沒有找到

vite-bundle-analayer

tree shake visualizer 的vs 擴充套件
https://marketplace.visualstudio.com/items?itemName=antfu.treeshake-visualizer

利用source map 來呈現

---

檔案分割 會比較好tree shaking 掉

---
### Tree-shake annotations

1. [`@__PURE__` Compatibility Table](https://github.com/javascript-compiler-hints/compiler-notations-spec/blob/main/pure-notation-compatibility.md)
2. [`@__NO_SIDE_EFFECTS__` Compatibility Table](https://github.com/javascript-compiler-hints/compiler-notations-spec/blob/main/no-side-effects-notation-compatibility.md)

package.json 還有一個可以告訴打包工具哪裡是沒有side effect 的設定

zod 無藥可救
pinia 救了
valibo 也有做好tree shaking
Vue use 有做了許多tree shaking 讚讚
zod 4 (zod mini) 解決了 tree shake 但還是沒完全解決(PR發了還沒人合)

> 聊天區

---

{%hackmd @JSDC-tw/jsdc2025_sponsor %}