面试题：Angular生产版本构建下不同环境配置切换及优化

Question

在Angular项目中，已经有开发环境和生产环境的配置。现在需要新增一个预发布环境，要求配置不同环境下的日志级别以及服务器地址等变量。请描述实现这个需求的详细步骤，并说明如何优化构建过程以确保不同环境配置准确无误且构建效率不受太大影响。

Answer 1

实现步骤

1. 创建预发布环境配置文件：
   • 在项目的 src/environments 目录下，创建 environment - preprod.ts 和 environment - preprod.prod.ts 两个文件。前者用于开发阶段的预发布环境配置，后者用于生产构建时的预发布环境配置。
   • 例如，environment - preprod.ts 内容可能如下：

export const environment = {
  production: false,
  logLevel: 'debug',
  serverUrl: 'http://preprod - server.example.com/api'
};

• environment - preprod.prod.ts 内容可能如下：

export const environment = {
  production: true,
  logLevel: 'info',
  serverUrl: 'http://preprod - server.example.com/api'
};

2. 配置构建脚本：
   • 在 angular.json 文件中，找到 architect.build 部分。
   • 在 configurations 下添加预发布环境的配置，例如：

"preprod": {
  "fileReplacements": [
    {
      "replace": "./src/environments/environment.ts",
      "with": "./src/environments/environment - preprod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "6kb",
      "maximumError": "10kb"
    }
  ]
}

• 同样在 architect.serve 下的 configurations 中也添加预发布环境配置，用于开发阶段的预览：

"preprod": {
  "browserTarget": "your - project - name:build:preprod"
}

3. 在代码中使用环境变量：
   • 在需要使用日志级别或服务器地址的地方，通过导入 environment 来获取相应配置。例如，在一个服务中：

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor() { }

  getServerUrl() {
    return environment.serverUrl;
  }
}

优化构建过程

1. 代码拆分：
   • 使用Webpack的代码拆分功能，将应用程序代码拆分成更小的块。例如，通过懒加载路由模块，只在需要时加载相关代码。在 app - routing.module.ts 中，配置懒加载路由：

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

2. 缓存策略：
   • 配置构建工具（如Webpack）使用缓存。在 angular.json 中，architect.build 下的 cache 属性设为 true，这将启用构建缓存，加快后续构建速度。
3. 优化资源加载：
   • 对于图片等静态资源，使用图像优化工具压缩图片。可以在构建过程中集成工具如 image - webpack - loader 来自动优化图片。
   • 对于样式文件，启用CSS提取和优化，在 angular.json 的 architect.build 中，extractCss 设为 true，并配置 cssOptimizer 进行CSS优化。