· 工程實務
i18n 難的從來不是翻譯，是沒有人擁有那份語系檔
多語系的痛不在裝哪一套套件，而在 key 誰命名、字誰擁有、翻譯跟不上 sprint 怎麼辦。這篇把 i18n 治理拆成命名、擁有權、流程、在地化、政治五層，越往下工程越管不到，也越決定它會不會爛掉。
🛠️ 工程實務
架構、微前端、模組化、測試、重構與設計模式 · 共 98 篇
· 工程實務 · 系列:ai-era-craft
解決方案比畫圖寫 Code 還重要：AI 時代工程師的價值在哪
AI 時代 Code 寫得漂不漂亮、文件齊不齊，份量都變輕了。但在方便、安全、效率、便宜之間該取捨什麼，依賴的是預算、團隊、客戶這些不在 prompt 裡的真實變數，這才是 AI 觸及不到、工程師還站得住腳的地方。
· 工程實務
零信任
內網不等於安全。這篇用城堡與飯店房卡的比喻講清楚零信任在防什麼：從邊界防禦到每次請求都驗、讓服務直接隱形，以及爆炸半徑的控制。
· 工程實務
關於環境變數
前端打包完成後,環境變數就寫死在產出檔案裡，不像後端可以重啟切換。這篇講為什麼「動態介接環境變數」在前端不成立,以及 runtime config 這個解法的代價。
· 工程實務
資安漏洞遠比你想像的還要多
不是你的系統堅不可破，是它還不夠有價值被偷。這篇整理五個高價值資安觀念：前端沒有秘密、有 I/O 就有破口、零信任驗證、HTML 字串一律檢查。
· 工程實務
Shadcn UI
Shadcn UI 現在幾乎成了前端的優先選型，老實說有點疲乏。Headless 帶來極強的可修改性，但也帶來閱讀負擔——工程師永遠在彈性和效率之間取捨。
· 工程實務
Web 和 App 的差別
上一頁、重新整理、右鍵、閱讀器，這些都是 Web 才有的操作。權限模型、外框空間、版本兼容期限也都不同——不要把 Web 當 App 去設計。
· 工程實務
效能優化故事
「打開 devtool 畫面就卡死」，查下去發現跟 devtool 無關，是 resize。用 performance recording 一步步縮小範圍，元兇竟然是 Textarea。
· 工程實務
前端 Serverless
Next.js 帶起 Serverless 的 Rendering Service，但 Edge runtime 是閹割版的 Node.js。想串外部服務才發現沒有 net module，也就是沒有 Socket 能力。
· 工程實務
一定要用 TypeScript 嗎？
成本高可以寫 any、編譯慢可以部分預編譯、老專案可以用 JSDoc 漸進導入。這些反對理由我都認同，但沒有 TypeScript 的大專案真的很痛苦。
· 工程實務
處理資料
前後端在處理資料這件事上的思路差別，這是一段還沒寫完就擱著的隨手筆記，先留個開頭。
· 工程實務
Service Worker
Service Worker 就像一台開在瀏覽器裡的伺服器：長期快取、Web Push、攔截請求、背景長連接，還能不卡主線程做運算。PWA 就是基於它。
· 工程實務 · 系列:refresh-token
Refresh Token
Refresh Token 是我做過所有前端需求中最通用、也最困難的機制。非同步處理、閉包、重試限制只是基礎，業界幾乎沒有統一做法或標準化套件。
· 工程實務
State management
最好用的狀態管理機是哪一款？Redux、Zustand、Vuex、Pinia 都不錯，但我更喜歡 Proxy base 的。我的答案是：vue。
· 工程實務
useEffect 要 Cleanup
事件要清除、外部狀態要恢復，大家都知道。但 Promise 的 callback 嚴格說也是一種 event callback，那是不是也該 cleanup？
· 工程實務
CommonJS 前往 ESModule
大家寫的 ESModule 上了瀏覽器多半不是真的用 ESModule 在跑。這篇講遷移時最麻煩的兩個東西：export default 與 require，以及兩種模組化為什麼不等價。
· 工程實務
CSS In JS
styled components 終止更新，進入長期維護階段，這件事社群沸沸揚揚。 有人說，這件事代表的是一代技術的興衰，隨著 Atomic CSS 的興起，逐漸大家捨棄了原本 cssinjs 的方案。也有人說，與其使用 runtime
· 工程實務
Tanstack Query：它不只是打 API 的工具
很多人把 Tanstack Query 當成打 API 的工具，那太狹隘了。useQuery 是「Resource 的非同步狀態同步機」，useMutation 是「非同步方法的狀態管理機」。
· 工程實務
你真的驗證過 Tree Shaking 嗎？
在現在 極端 內捲的 前端 生態裡面 ， 每個 都計較 怎麼 打包 ， 要多小， 要 多 快 。 B un dl e Siz e 可以說是 非常 有價值 的 優化 項目 ， 但 你 真的 有 驗證過 ， 你 自己的 專案 T re e S
· 工程實務
開發後端的感受-2
玩後端一個月，發現「寫出來」真的不難，後端沒有前端的 CSS 門檻。但進入微服務之後，依賴管理與資料流控管的複雜度就開始指數上升。
· 工程實務
開發後端的感受
前端工程師跑去寫後端的體感筆記：更在意事件併發、記憶體不會自動清、進入點多但 Context 單純、測試超好寫，也更在乎抽象介面而非實作。
· 工程實務
關於前端架構
前端架構不只是資料夾結構和 Builder Tool。這篇列出七個真正該關注的點：可測試性、各種狀態的顯示、多語系破版、跨 feature 解耦、命名規範。
· 工程實務
如何估時程？
做過的東西只需要刻意練習就能估準。面對不熟悉的東西則需要一場「前哨戰」：先估一個「需要多久能估出總時程」的時間，甚至直接寫 POC。
· 工程實務
開發要不要寫文件？
文件不需要寫「這段程式幹嘛」，程式會重構迭代。真正要寫的是目的、規格，尤其是你解決的邊際問題。而且文件是寫給後手和未來的自己看的。
· 工程實務
重構的故事（一）
公司主力舊專案是 Vue2，CTO 希望用微前端 migrate 到 React。看起來只要解決微前端、拆商業邏輯、逐頁重做——當然，想的簡單。
· 工程實務
重構一個前端專案
三次比較大的重構：80 多組 Resources 的 Vue2 系統、要用微前端 migrate 到 React 的高耦合專案，以及 31 組語系、品質極差的 Nuxt3 重構案。
· 工程實務
程式碼越少越好？！
大家都說聚合性要高、程式碼越少越好維護，但我重構過的專案告訴我相反的事：複用率越高的專案，反而比幾乎不複用的爛專案更難維護。
· 工程實務
最誇張的多語系
接手一個看起來功能不多的專案，直到看見它的 i18n——宏偉的 28 種語系，需求還要再加三種。每多一個詞彙，要改的 json 就是一場惡夢。
· 工程實務
造一個輪子
造輪子之前，先搞懂別人的輪子解決了什麼、極限在哪。如果參不透別人輪子的精髓，那你造出來的會是個方輪，用它只會帶來災難。
· 工程實務
前端系統要設計什麼？
前端沒有微服務，那資深前端架構師到底要設計什麼？這篇先定義前端獨有的五個問題：bundle size、難以拆分、Context 太多、體感細節、瀏覽器管控。
· 工程實務
Code Review
Code Review 不是拿來管品質，也不是審核誰寫得好。這篇講它真正該做的四件事、不該做的兩件事，以及為什麼兩人以上協作就需要它。
· 工程實務
關於事件匯流排
JavaScript 本來就是 Event Drive 的語言，Event 對解耦有無比強大的特性。但很多前端不喜歡甚至反感這個設計，覺得多餘、複雜、難維護。
· 工程實務
React Router
用過 vue-router 之後，其他路由系統我都覺得難用。這篇列出 react-router-dom v6 讓我卡住的地方：不建議操作 Router 實體、沒有導航攔截、無法針對 route id 導向。
· 工程實務
技術強弱
到了 mid level 以上其實很難比較誰強誰弱。專案規模、開發節奏、團隊文化都會養出不同的重視點——與其質疑對方的想法有問題，不如去了解它誕生的時空背景。
· 工程實務
關於 RestfulAPI
Restful API 不只是分 GET、POST、PUT、DELETE，你還得懂 http 規範和瀏覽器規範。這篇列出三種一看就會踩雷的 API 設計。
· 工程實務
軟體架構這件事
架構開得越大，改動成本越低，但維持成本越高。以多國語系為例，事先做好確實省下重構，但資料庫與翻譯表的長期維持也很貴。
· 工程實務
關於開發流程這件事
「團隊那麼小，不需要開發流程」——對，也不對。小團隊需要的是「精簡必要的流程」，而不是亂無章法。有機制保障失誤，重構和升級才敢大膽執行。
· 工程實務
Component 卸載，非同步要清理
元件掛載時打 API 很常見，但元件被卸載後 callback 並不會中止，還是會把非同步跑完，執行「不需要的行為」。趕快檢查你的元件有沒有好好清理。
· 工程實務
寫 Class 有什麼問題？
class 其實只是 function 的進階應用。想寫的話要注意：解構後 this 會消失、用 this 改狀態不會響應。OOP 和 FP 從來不是對立的。
· 工程實務
關於共用這件事
共用會帶來「依賴」和「版本」兩個問題，而這兩個才是日後麻煩的元兇。適當的複製貼上，反而可以讓程式更好閱讀與重構。
· 工程實務
伺服器渲染 (SSR)
SSR 架構下 Token 該放哪？伺服器拿不到 Client 的 LocalStorage。這篇講怎麼用 http only cookie 解決，也講為什麼我更推崇 PreRender。
· 工程實務
人為失誤
我沒有變得不容易失誤，但我的失誤對專案的影響變小了。關鍵在 QA 機制與 CI/CD Workflow——好的團隊機制會放大人才的優點，而不是凸顯缺點。
· 工程實務
Mock Server
後端還沒好、外部資源掛掉都會卡住前端開發，Mock Server 可以用 Node.js 或 Service Worker 模擬一個伺服器環境。但也有人認為這只是拉高成本。
· 工程實務
微前端系列（十三）
微前端選 CSS 方案要格外小心，因為 CSS 不分作用域。這篇比較 CSS Module、Component Selector、CSS in JS、Atomic CSS，也分出全域、Hash、Document 三種作用域模式。
· 工程實務
該造輪子了嗎？
經驗不足的優先用套件，有經驗的要知道套件做了什麼，資深的則是「有條件的造輪子」——先讀完知名套件的原始碼，再來造自己的。
· 工程實務
你可能不需要 SSR
SEO 用 SSG 排程預渲染就夠了、渲染效率未必更快、CLS 本來就不該是問題。這篇把 SSR 的好處一條條拆開檢查，再看它帶來的四個副作用。
· 工程實務
微前端系列（十二）
browser history 在整個應用中是唯一的，多個微應用各開路由器就會打架。解法還是單向資料流：微前端應用不要直接操作路由器。
· 工程實務
微前端系列（十一）
History Router、Locale、Browser Storage 都是單例狀態，在微前端裡最容易發生循環修改與資料流混亂。同步的狀態修改我最推薦用 Flux 單向資料流管理。
· 工程實務
微前端系列（十）
前端有流量成本，所以「共用」比微服務更需要煩惱。Module Federation 目前幾乎沒有更完善的替代方案，代價是模組化會被綁在特定的 chunk system。
· 工程實務
微前端系列（九）
微前端的跨應用溝通沒有 import 可以用。但所有微應用都跑在同一個 global 底下，這篇講三種做法：套件共享、瀏覽器事件機制、後端 WebSocket。
· 工程實務
每一種寫程式的呈現都是一種「風格」
「這樣比較好維護」其實相當主觀，可讀性跟閱讀者的背景高度相關。只要符合說好的規範，剩下的就是風格問題，我不想干涉別人怎麼寫。
· 工程實務
微前端系列（八）
很多人把微前端和 Module Federation 劃上等號，但 MF 不是必要的，也不是 Framework，它只是一種 bundle 的概念，用來解決版本管理與模組共享。
· 工程實務
微前端系列（五）
接著就是以 Component 化的角度來看看微前端的實作方法。 iframe WebComponent Frontend Framework Component (react, vue, angular) iframe 這是最古老最穩定的
· 工程實務
微前端系列（四）
三種服務端解決方案的優劣：xhr/fetch 插 script 上下限最大、module-federation 完整但綁打包工具、微前端框架最省力卻失去微調能力。
· 工程實務
微前端系列（七）
我為什麼開始玩微前端？公司有多個前端框架並行、產品要架在 Local 且組態多變、還希望能給第三方動態掛載功能——這三個原因把我推上這條路。
· 工程實務
微前端系列（六）
微前端要面對的五個核心問題：應用間溝通、模組共用、全域單例狀態、樣式管理、CI/CD。這篇逐一說明每個問題到底出在哪。
· 工程實務
微前端系列（三）
實施微前端的主流方案：Application 層級有 xhr/fetch 插 script、module-federation、微前端框架；Component 層級有 iframe、WebComponent、框架元件。
· 工程實務
物件導向只是一種設計模式的表現方式
前端圈不流行寫 class，那還需要學 Design Pattern 嗎？後來我才體會到設計模式是一種「精神」，不限於物件導向——Curry 就是物件不需要的模式。
· 工程實務
微前端系列（二）
微前端的好處是解耦、拆分職責、CI/CD 更快、沒有超大專案的維護壓力。壞處也很實在，這篇把優劣一起攤開來分析。
· 工程實務
微前端系列（一）
微前端、微應用、前端微服務講的是同一件事。這篇是系列開場，也澄清一個常見誤會：把服務切成 npm package 並不算微前端。
· 工程實務
微前端
微前端就是把微服務的概念套進前端。這篇講什麼時候該考慮導入：專案大到影響編譯時間、跨部門共同維護、需要多框架共存，以及第一個麻煩點——溝通。
· 工程實務
依賴循環：重談 circular dependency 與打包的關係
模組循環在前端多半不會爆，因為打包後模組早就載入完成。但完全不經過打包執行時就會出事，而且它本身就是架構層次不清楚的徵兆。
· 工程實務
總會有地方搞得很複雜
我寧可底層邏輯複雜，也要業務層簡潔好用，因為業務層才是經常被改動的地方。函式庫原始碼有八成在服務 API 介面，核心功能佔比其實極少。
· 工程實務
ESModule 的載入特性
我們前端每天都在寫 ESModule，但你真的懂它是怎麼運行的嗎？這篇談它的載入特性。
· 工程實務
瀏覽器快取
做多站點登入和 SSO 踩了滿坑滿谷。這篇講 cookie、sessionStorage、localStorage 各自的保存範圍與風險，以及為什麼快取機制會深深影響系統設計。
· 工程實務
瀏覽器路由
路由器看似簡單其實很複雜。popstate 只監聽得到 forward、back、go，pushState 和 replaceState 是聽不到的。解法還是回到單向資料流。
· 工程實務
開發一個微前端框架
正式接到 CTO 的需求，要從零著手開發一套自己的微前端框架，這篇是動工前留下的紀錄。
· 工程實務
到底架構要解決什麼問題？
架構是把經驗值變成規範，讓團隊繞過風險而不必逐一交代情境。這篇講它解決的維護心智負擔與商業層面問題，也講它最後會遇上的人才集中難題。
· 工程實務
先別急著對需求回應
收到需求的第一反應不該是「這很難做」。成熟的工程師該提出解決方案，而不是一昧提異議。這篇也講估時程為什麼需要刻意練習，以及 POC 的價值。
· 工程實務
前端基礎設施
Frontend Infrastructure 涵蓋 CI/CD、打包、套件管理、SSR、監控、容器管理、AST、Module Federation。這些多半不是業務開發會碰到的技術，卻是團隊規模長大後的關鍵。
· 工程實務
關於前端單元測試
新手最常犯的錯是「貪圖一個案例測到太多東西」。觸發和渲染該拆成兩個 Test Case，外部依賴該 mock 掉——那是 end to end 才要做的事。
· 工程實務
CommonJS 與 ESModule
JavaScript 早期沒有命名空間也沒有模組概念，所有東西從頭寫到尾。這篇從那個時代講起，看模組化是怎麼一步步長出來的。
· 工程實務
為什麼前端這麼需要 Project Builder？
為什麼只有前端要又轉譯又打包？從一支破萬行的 HTML、破萬行的 CSS、上百張圖片講起，也講為什麼後端能拆微服務而前端拆不了。
· 工程實務
真的有需要微前端嗎？
微前端目前炫技成分居多，生態系極不成熟。後端拆微服務有伺服器壓力分配的必要性，微前端沒有這種優勢，反而大幅提高溝通與程式碼複雜度。
· 工程實務
Domain Driven Design
前端套 DDD 的水土不服：Domain layer 得靠 class、CQRS 讓定義一個行為的成本暴增。但用 Domain 劃分後重構成本大降，微前端也有了溝通橋樑。
· 工程實務
動畫製作
動畫的本質是處理每一個影格該長什麼樣子。這篇講 Reflow 與 Repaint 的差別（連「取得」尺寸都會觸發），以及為什麼實作動畫最好脫離框架直接操作 DOM。
· 工程實務
JSDoc
「為什麼不乾脆用 TypeScript 就好？」因為不是每份工作都能讓你任意導入技術。JSDoc 不只是閹割版型別檢查器，它在編輯器輔助上的價值也很高。
· 工程實務
依賴循環：前端的 circular dependency 多半不會爆
為什麼前端的 circular dependency 多半不會爆？因為 ESModule 打包後模組早已載入完成。但這不是「會不會動」的問題，是架構層次不清楚的徵兆。
· 工程實務
技術選型是要找合適的
「有新專案就該用 Composition API」我持否定態度。它在大專案的優勢很明顯，但給 junior 用會有超多誤操作，Optional API 的價值不該被忘記。
· 工程實務
用我用什麼角度去看套件？
「套件幫我解決了，不用管細節」這種態度我不太認同。我的實力是靠大量閱讀原始碼建立的，知道它的實作原理，就能預先知道坑在哪。
· 工程實務
關於 Functional Programming
學生許願想聽 FP，結果我一頭栽了好幾個月。從陳述式換到表達式、習慣 immutability、熟悉 curry，這篇也講為什麼 FP 很少在工作場域看到人真的用。
· 工程實務
實作狀態管理器
mobx 用 OOP 的核心理念建構，跨應用驅動的特性在微前端有優勢。但物件導向邏輯跟 React 那套非常 FP 的設計，衝突與不便也很明顯。
· 工程實務
Module Federation
Module Federation 讓微前端的各應用有效共用函式庫，但它是「同版本共享」而非多版本共存。這篇講共享機制的維護、權重規則與它帶來的打包代價。
· 工程實務
關於微前端的研究
做微前端半年，大部分時間都花在架構和打包上。這篇談踩坑最深的 vite、微前端為什麼比微服務普及得慢，以及它需要的那片知識海。
· 工程實務
看爛 Code 也是種學習
看過夠多糟糕的寫法，才知道好壞差在哪。這篇是重構時痛出來的九條原則：常數取代字串組合、減少耦合、減少狀態、避免巢狀、Linter 不能亂 disable。
· 工程實務
無障礙網頁有多麻煩？
FreeGo 和 CNN 檢測都過了，不代表真的能用。這篇分享做無障礙電子書時注意到的八個細節，以及為什麼無障礙做得最好的其實是 Bootstrap。
· 工程實務
哪來的勇氣去相信套件？
很多工程師無條件相信套件，但套件不一定寫得好。挑套件前我一定會把原始碼大致讀一次，重點是快速掌握它的關鍵在哪，而不是「不懂，用就對了」。
· 工程實務
講了很多次，要寫文件！
團隊出走後新人接手，光是研究舊功能的設計理念就耗掉大把時間，Bug 率居高不下。文件真正的用途是給「後手」看的：有文件叫考古，沒文件叫通靈。
· 工程實務
為什麼前端打不到資料？
「我 postman 都會通，為什麼你打不到？」這就是 CORS。這篇講瀏覽器為什麼要擋、該從伺服器解決，以及前端自己起 proxy 這個解法的代價。
· 工程實務
錯的不是技術
一聽到 Wordpress、MVC、jQuery 就聞之色變。但每種技術背後都有它要解決的問題，嚷嚷的人往往不了解新技術想解決什麼，反之亦然。
· 工程實務
關於穩定度
獵頭和主管都追求「員工穩定」，但那其實是個盲區。三年薪資成長三倍，換得快不等於不穩定——該看的是他知不知道自己為什麼要換工作。
· 工程實務
Monorepo 踩坑記
Monorepo 最難搞的是依賴問題。打包套件內部自動 require 時無法分辨 workspace 還是 root，會去讀它自己所在的 node_modules，坑就從這裡開始。
· 工程實務
Webpack升版（二）
要關閉 Vue cli 的 TS，方法就是去修改 ts loader 的設定，從頭到尾不是 ESLint 做的祟。到這裡總算是可以把專案暫時動起來了，但接著還要各種問題⋯⋯最要命的是 typescript 的各種運行規則，不要去挑戰非常冷門
· 工程實務
Webpack升版（一）
把一個龐大的 Vue-cli 專案從 webpack 4 升到 5。這篇記下升級介面的選擇、Node 版本與 polyfill 的坑，以及 TS 錯誤噴到崩潰時關不掉檢查的怪事。
· 工程實務
Mobile App和 Mobile Web 是不一樣的東西
App 與 Web 的分辨點在「預設行為」與「預設介面」。要求兩者統一，得先建立在了解與充足的開發資源上，否則只是因為無知而做的任性。
· 工程實務
文件究竟價值在哪？
朋友的新創團隊急著把 Code 寫出來、拒絕寫文件，兩個月後 PM 和工程師翻臉走人，那堆程式碼沒人想接。最後最有價值的，反而是當初沒寫的文件。
· 工程實務
重構專案
怎麼說服公司願意重構？你需要一份問題列表：現存 Bug、復現方式、利害分析、解決方案、時間與週期，再偷偷開分支做出佐證。
· 工程實務
圖表系統開發經驗
為了做一個高度客製化的 Event Time Line Chart，只好跳下去跟 Canvas 搏鬥。到了 Canvas 沒有 CSS，碰撞、渲染、組件化全部要用數學算出來。