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