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 便可。