Code Splitting
程式碼分割
01你是不是遇到這個 / THE SYMPTOM
我的網站 JavaScript 打包成一個超大檔案，使用者一進首頁就要下載整個 app 的程式碼，開很慢。我想讓首頁只載首頁需要的那部分。
↑ 如果你點頭了，你要的關鍵字就是 Code Splitting。
02這是什麼 / DEFINITION
把一整包巨大的 JavaScript 拆成多個小區塊，讓瀏覽器只在需要某個頁面或功能時才下載對應的那一塊，而不是一次載入整個應用程式的所有程式碼。
03什麼時候用 / WHEN TO USE
single page application 變大、首屏載入慢、某些功能（後台、編輯器、圖表庫）很重但不是每個人都會用到時。常搭配路由做「每個頁面一包」或對重元件做動態 import。
04怎麼跟 AI 說 / HOW TO ASK
直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT：
幫我用 code splitting 把這個很重的元件改成動態 import（dynamic import / React.lazy），只在使用者進到該頁面時才載入它的程式碼。
05常見坑 / WATCH OUT
⚠ 容易跟 lazy loading 混：code splitting 是「拆 JS 程式碼」的打包概念，lazy loading 是「需要時才載資源」的廣義策略——動態 import 通常兩者一起發生。拆太細反而產生太多小請求，要拆在合理的邊界（如路由）。
06相關的詞 / RELATED