# Angular Build 環境設定：自訂環境 vs Production Build

## 1. 自訂環境與 Production Build 的差別是什麼？

Angular 在建置專案時，透過 angular.json 中的 fileReplacements 與 build configurations 來控制不同環境的建置行為。最常見的環境是 production，但你也可以自訂例如 uat、sit 等環境。

### 環境檔替換（fileReplacements）

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
]

這代表在 build 時會將 environment.ts 替換成 environment.prod.ts，以載入不同的設定值（如 API base URL、debug flag 等）。

### Build 最佳化差異

| 項目 | Production 預設值 | 開發或自訂環境預設值 |
|------------------|------------------|----------------------|
| optimization | true | false |
| sourceMap | false | true |
| namedChunks | false | true |
| extractLicenses | true | false |
| vendorChunk | false | true |
| buildOptimizer | true | false |
| aot | true | false |

### 這些設定會顯著影響：

- 打包體積大小
- 是否壓縮與優化代碼（tree-shaking）
- 是否產生 .map 檔（方便除錯）
- 預先編譯效率（AOT）

### Production Mode

在 environment.prod.ts 中，通常會設定：

export const environment = {
  production: true
};

這會在 App 啟動時觸發：

if (environment.production) {
  enableProdMode();
}

啟用 Production Mode 會：

- 停用 Angular 的開發檢查與 debug log
- 提升效能與渲染速度

## 2. 如何建立一個像 Production 的自訂環境？

假設你要建立一個 uat 環境，具有與 production 相同的優化設定，可在 angular.json 中加入：

"configurations": {
  "uat": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.uat.ts"
      }
    ],
    "optimization": true,
    "sourceMap": false,
    "namedChunks": false,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "aot": true,
    "production": true
  }
}

並新增 `src/environments/environment.uat.ts`：

export const environment = {
  production: true,
  apiUrl: 'https://uat-api.example.com',
  enableDebugLog: false
};

使用指令：

`ng build --configuration uat`

即可編譯出與 production 相同優化程度的 build。

## 3. 什麼時候該用 production build？

- 適合使用 production build 的時機：

- 要部署到正式環境（production server）時
- 需要最佳效能與最低檔案體積時
- 不需開發用 console log 或 source map 時

- 不適合使用 production build 的時機：

- 本地端或測試環境需要進行除錯（需保留 source map）
- 測試 UI 或行為調整時需保留 console.log 訊息
- 希望觀察非優化後的檔案結構或 bundle

## 結論

使用自訂環境（如 UAT、SIT）可以針對不同部署情境做靈活設定

若要與 production 有同樣效能，需明確指定各種優化設定與 production: true

正式上線請使用 production，測試與除錯則建議使用 development 或調整過的自訂環境