脫離「npm run build 黑箱魔法」

更新於 2025/03/02發佈於 2025/03/02閱讀時間約 6 分鐘

前言:

開始寫網站時，我對「打包」的理解就是那神秘的一行指令：

npm run build

東西就 magically work™，隨著專案越來越複雜，我開始意識到，不能再把打包當作黑箱魔法，於是我決定跟 AI 促膝長談，揭開這背後的秘密。這篇分享就是我和AI對話後的總結，希望能幫助你在面對「什麼是打包？」這個問題時，不再是呆滯地看著前方，而是能像老練的探險家一樣，自信地說：「來，我帶你了解這背後的秘密！」

什麼是打包？為什麼需要打包？

打包是將多個前端資源（JavaScript、CSS、圖片等）處理並合併的過程，不是編譯成機器語言。

打包的主要目的：

解決模組化問題
管理複雜的相依性關係
進行代碼轉換與瀏覽器兼容
優化網站效能
處理各種非 JS 資源

核心專有名詞解析

1. Bundle（捆綁包）

最終提供給瀏覽器下載的合併檔案，通常是 JavaScript 檔案。

app.js // 一個合併了多個原始檔案的 bundle

2. Chunk（區塊）

打包過程中的代碼集合單位，最終 bundle 的組成部分。

Chunk 形成方式：

入口點：每個入口檔案形成一個 chunk
動態導入：使用 import() 語法分割的代碼
共享模組：多個部分共用的代碼被提取

實際例子：

dist/

├── main.js (主頁代碼 chunk)

├── product.js (產品頁代碼 chunk)

├── vendors.js (第三方庫 chunk)

└── shared.js (共用代碼 chunk)

3. Source Map（源碼映射）

將壓縮、合併後的代碼映射回原始程式碼，便於除錯。

4. Tree Shaking（搖樹優化）

自動移除未使用的代碼，減小檔案大小。

// 只有 sum 會被打包，multiply 會被移除
import { sum } from './utils';

5. Code Splitting（代碼分割）

將應用分割成多個獨立檔案，按需載入，提升首次加載速度。

6. Transpilation（轉譯）

將現代 JavaScript 轉換為舊版瀏覽器可執行的代碼。

// ES6 轉譯為 ES5
const add = (a, b) => a + b;  →  var add = function(a, b) { return a + b; };

7. Minification（最小化）

移除空格、縮短變數名，減小檔案體積。

8. Lazy Loading（懶加載）

非關鍵資源延遲載入，僅在需要時才下載。

主要打包工具比較

Webpack

特點：功能全面，生態系統豐富，高度可配置
優勢：處理各種資源類型，強大的代碼分割能力
適用：大型應用開發，需要複雜資源處理的專案

Rollup

特點：輸出更乾淨的代碼，優秀的 Tree-shaking
優勢：無額外運行時代碼，多種輸出格式支援
適用：庫開發，純 JavaScript 專案

Vite

特點：開發環境使用原生 ES 模組，生產環境使用 Rollup
優勢：極快的開發伺服器啟動，優化的構建結果
適用：現代化前端專案，追求開發體驗和構建效能

從開發到部署的完整流程

1. 開發階段

設置開發環境與工具
編寫模組化代碼
使用開發伺服器本地測試

2. 構建階段

代碼轉換：TypeScript → JavaScript, SCSS → CSS
優化處理：壓縮、Tree-shaking、內容雜湊
資源處理：圖片壓縮、生成雪碧圖
打包輸出：生成優化過的檔案

3. 部署階段

上傳生成的靜態檔案到 Web 伺服器或 CDN
配置伺服器、網域和 SSL
設置 CI/CD 自動化部署流程

進階優化技術

1. 差異化載入（Differential Loading）

為不同瀏覽器提供不同版本的代碼。

<script type="module" src="app.modern.js"></script>
<script nomodule src="app.legacy.js"></script>

2. 長期快取（Long-term Caching）

使用內容雜湊命名檔案，以利用瀏覽器快取。

main.8e4f3c2d.js  // 內容變化時雜湊值會改變

3. 預載入/預獲取（Preload/Prefetch）

<link rel="preload" href="critical.js" as="script">
<link rel="prefetch" href="next-page.js">

4. 動態導入（Dynamic Import）

運行時按需載入模組。

button.addEventListener('click', () => {
  import('./feature.js').then(module => module.init());
});

實際應用案例

組件級別代碼分割

// Vue 中的懶加載組件
const LazyComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
);

// React 中的懶加載組件
const LazyComponent = React.lazy(() => import('./HeavyComponent'));

路由級別代碼分割

// Vue Router
const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue') // 獨立 chunk
  }
];

// React Router
const Dashboard = React.lazy(() => import('./pages/Dashboard'));