angular打包優化

打包生產環境時需要的配置如下：

在angular.json里的“configurations”里配置：

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "3mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "devops": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.devops.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "3mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },

其中的配置項解釋(參考官方文檔)：

配置針對特定目標的文件替換規則
CLI 的主配置文件 angular.json 中的每個構建目標下都包含了一個 fileReplacements 區段。這能讓你把任何文件替換為針對特定目標的版本。 當構建目標需要包含針對特定環境（比如生產或預生產）的代碼或變量時，這非常有用。

默認情況下不會替換任何文件。 你可以為特定的構建目標添加文件替換規則。比如：

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

  "optimization": true,//啟用構建輸出的優化。
    "outputHashing": "all",//定義輸出文件名緩存消除哈希模式。
    "sourceMap": false,//會使打包變慢
    "extractCss": true,//從全局樣式中將css提取到css文件而不是js文件中。
    "namedChunks": false,//將文件名用於延遲加載的塊。
    "aot": true,//是否采用aot預編譯模式
    "extractLicenses": true,//將所有許可證提取到一個單獨的文件中。
    "vendorChunk": false,//使用僅包含供應商庫的單獨捆綁包。
    "buildOptimizer": true,//   Enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.

 

配置文件大小預算
當應用的功能不斷增長時，其文件大小也會同步增長。 CLI 允許你通過配置項來限制文件大小，以確保應用的各個部分都處於你定義的大小范圍內。

你可以在 CLI 配置文件 angular.json 的 budgets 區段為每個所配置的環境定義這些大小范圍。

{
  ...
  "configurations": {
    "production": {
      ...
     "budgets": []
    }
  }
}

你可以為整個應用指定大小范圍，也可以為特定部分。 每個條目會為一種特定的類型配置大小范圍。 用下列各式來指定大小的值：

123 或 123b：以字節為單位的大小

123kb：以 kb 為單位的大小

123mb：以 mb 為單位的大小

12%：相對於基准大小的百分比大小。（不能用作基准大小的值。）

如果配置了大小范圍，構建系統就會在發現應用的某個部分達到或超過了你設置的大小范圍時發出警告或報錯。

每個范圍條目是一個 JSON 對象，它具有下列屬性：

屬性	值
type	限制的類型。有效值為：bundle – 特定包的大小。 initial – 應用的初始大小。allScript – 所有腳本的總大小。all – 整個應用的總大小。anyScript – 任何一個腳本的大小。any – 任何一個文件的大小。
name	要限制的包的名字（當 type=bundle 時）。
baseline	一個表示基准大小的絕對值，用做比例值的基數。
maximumWarning	當大小超過基線的這個閾值百分比時給出警告。
maximumError	當大小超過基線的這個閾值百分比時報錯。
minimumWarning	當大小小於基線的這個閾值百分比時給出警告。
minimumError	當大小小於基線的這個閾值百分比時報錯。
warning	當大小達到或小於基線的這個閾值百分比時都給出警告
error	當大小達到或小於基線的這個閾值百分比時都報錯

在src/environments文件夾下建不同環境的配置文件，配置項目所需要的環境變量即可，如下圖：

export const environment = {
  production: true,
  baseUrl: 'https://witest.cndhl.com/v2'
};

在package.json文件里可以配置打包命令：

{
  "name": "dhl_pc",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "build-devops": "ng build --configuration=devops",
    "build-dhl": "ng build --configuration=production --base-href /v2/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

打包生產環境可以用命令： npm run build-dhl 即可。