## 部署大戰歷史
[webpack](https://webpack.js.org/):我們現在在用的,很慢
[esBuild](https://esbuild.github.io/):兩年前出現,比webpack快5倍
[vite](https://vite.dev/):尤雨溪開發,比esBuild更快
[SWC](https://swc.rs/):韓國人(後來這個人被Vercel吸收)開發,把webpack用Rust重寫
[turbopack](https://nextjs.org/docs/app/api-reference/turbopack):基於SWC的基礎開發,目前dev在stable版,build在Beta版,應該沒有vite快
### Next的歷程
- Next先整合SWC,因為轉換比較無痛
- 接著以SWC為基礎開發turbopack (目前跟Vite比速度)
- turbopack在Next 15時dev為stable版
- July 14th 2025 官方部落格 [turbopack build](https://nextjs.org/blog/next-15-4) 進Beta版
在這之前不推薦用,因為會有build失敗,但現在可以[100% build 成功](https://areweturboyet.com/)
### Turbopack優點
啟用 Next.js 的 Turbopack 有以下幾個主要好處：
- 極速開發體驗：Turbopack 能大幅提升本地開發的速度，根據官方數據，大型專案的本地伺服器啟動速度可提升約 76%，程式碼修改後的 Fast Refresh 速度提升高達 96%，初始路由編譯速度也有 45% 以上的提升。
- 單一編譯器設計：Turbopack 採用單一編譯器來處理前後端環境，減少多重編譯器協調的開銷，提高穩定性與可維護性。
- 高效增量編譯：透過並行運算與函式級快取，只會針對實際變動的部分重新編譯，大幅降低大型專案的等待時間。
- 更貼近生產環境：開發環境的建構結果與生產環境更一致，有助於提早發現潛在問題。
- 進階追蹤與除錯：內建追蹤工具可協助分析編譯效能瓶頸，方便團隊持續優化專案效能。
- 支援最新技術：完整支援 React Server Components、Fast Refresh、CSS Modules、PostCSS 等現代前端技術。
總結來說，啟用 Turbopack 能顯著提升開發效率、縮短回饋迴圈，並讓大型專案的開發體驗更順暢，是 Next.js 推薦的新一代建構工具。
### Jude PR
我們目前連dev都不能用,這隻[PR](https://github.com/HighfiveAILab/high5-turbo-platform/pull/84/files)為開啟Turbopack需要的設定
- 我們的舊CSS模組需要吃靜態檔案很多background-image(會因Turbopack 的 SVGR plugin 導致讀取到的是元件而不是網址,導致失敗),目前Dev可能會有圖片消失的問題
- [SVGR](https://react-svgr.com/)優點就是會將SVG圖檔轉換為React component (像是[Lucide-icon](https://lucide.dev/icons/octagon-x)),所有用到的地方都是共用同一個元件(業界標準熱門用法)
- 目前我們只有dev用turbopack,build還是用webpack,所以只有dev mode圖檔會消失
吃不同的設定檔
#### Turbopack SVG 處理說明
已支援 Turbopack 開發模式，但有以下已知差異：
**開發環境與生產環境差異**：
- 開發環境中的 CSS background-image 中的 SVG 可能不顯示
- 這是可接受的權衡，因為生產環境完全正常
- 此狀態為 CSS Module 重構前的過渡狀態

**如需驗證 CSS 背景圖片**：

pnpm build
pnpm start

**SVG 使用指南**：
- 作為 React 元件使用：直接 import，不需要 ?url
- 作為圖片使用：使用 ?url 後綴，或考慮使用 next/image
#### browser runtime AI MCP
[browsertools](https://browsertools.agentdesk.ai/installation):讓AI能偵測runtime error跟log,搭配Chrome plug-ing使用
但因為還沒發佈到google store,所以安裝較麻煩