Angular/Ionic应用Docker部署构建耗时优化及缓存方案问询

完全可以通过多级缓存机制留存构建产物，同时支持手动开关控制全量构建触发，常规部署耗时可降低至1分钟以内，具体方案如下：

1. 依赖环节缓存优化（覆盖resolving/fetching/linking三个步骤） #

这三步总耗时约1分59秒，可通过以下两种缓存方案完全复用结果：

• Docker分层缓存：编写Dockerfile时优先复制依赖声明文件，再复制业务代码，示例结构如下：

  # 先复制依赖配置，只要依赖不变这层直接复用
  COPY package.json package-lock.json ./
  RUN npm ci
  # 再复制业务代码
  COPY . .
  RUN npm run build
  

  配置后只要package.json和锁文件没有变更，依赖安装三步直接复用镜像缓存，耗时可降至2秒以内。
• AWS CodeBuild S3缓存：如果使用CodeBuild执行构建，可配置S3缓存持久化node_modules目录，无需每次重新下载安装依赖。

2. ES5 bundles构建缓存优化（覆盖7分7秒的核心耗时步骤） #

这是构建耗时的核心占比部分，可通过框架原生持久化缓存大幅降低耗时：

• Angular CLI 原生缓存：Angular 12及以上版本默认开启持久化构建缓存，缓存产物默认存储在.angular/cache目录，你只需要将该目录加入CI/CD的缓存规则，或者纳入Docker镜像缓存层，增量构建时ES5打包耗时可降至1分钟以内。
• 额外优化项：你当前的browserslist配置已经排除了IE 9-11，可以检查Angular配置文件angular.json中是否仍开启了冗余的ES5转译配置，若你的用户群体不需要兼容极老旧浏览器，可将构建目标调整为ES2020，全量构建时的打包耗时也可降低30%以上。

3. 全量构建手动触发方案 #

可以通过以下两种方式实现"默认走缓存、必要时手动触发全量构建"的逻辑：

• 构建参数开关：在CI/CD流程（CodePipeline/CloudFormation）中新增自定义参数，比如FORCE_FULL_BUILD，默认值为false，当参数为true时自动清空所有缓存、执行全量构建流程，否则默认复用所有缓存层。
• 镜像产物复用：将每次成功构建的最终镜像推送至AWS ECR，常规部署时优先拉取最近一次成功构建的镜像，只有手动触发更新时才执行完整构建流程。

内容的提问来源于stack exchange，提问作者WestCoastProjects