---
# System prepended metadata

title: 程式碼減重：你的 Tree-Shaking 在偷懶嗎？ - SerKo
tags: [JSDC2025]

---

# 程式碼減重：你的 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 

```javascript
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 %}