隨記

Week 12 · Day 01 — 建構生產版本

學習目標

  • 用 ng build 建構 production 版本
  • 了解建構輸出（dist/）
  • 認識生產與開發建構的差異

重點

建構 production 版本 

ng build --configuration production
- 產生最佳化、可上線的檔案到 dist/<專案名>/ - 環境變數會套用 environments/environment.prod.ts

輸出內容（dist/） - index.html - main.js / polyfills.js / runtime.js - 其他 chunk（含 lazy loading 獨立 chunk） - assets/ - styles.css

production vs development | 項目 | 開發 | 生產 | |------|------|------| | 命令 | ng serve | ng build --configuration production | | 輸出 | 記憶體中的 dev server | dist/ 靜態檔案 | | 最佳化 | 無 | minify / 搖樹 / aot | | 目的 | 開發與除錯 | 上線給使用者 |

建構最佳化手法（Angular 已內建） - AOT：建構時編譯模板（更快、較小） - Tree-shaking：移除未用程式碼 - minification：壓縮 JS/CSS

實作

  1. 執行 ng build --configuration production
  2. 檢視 dist/ 產出的檔案
  3. 用簡單靜態伺服器（如 npx serve dist/…）看是否能開啟生產版

作業

  • 成功建構 production 版本
  • 說出輸出在 dist/ 有哪些
  • 說明 production 與 dev 建構的差異