容器化Angular构建每次全量重编译问题的解决方案问询

问题1解决方案：原生支持的缓存方案 #

Angular CLI从12及以上版本默认开启了持久化构建缓存功能，编译产物（包括依赖库的编译结果）默认存储在项目根目录下的.angular/cache文件夹，你可以通过Docker的BuildKit缓存挂载能力直接复用该缓存，无需额外修改Angular配置：
修改后的前端构建阶段Dockerfile如下：

# Build frontend
FROM node:16 AS node-build
WORKDIR /app

COPY frontend/package.json frontend/package-lock.json ./
RUN npm install

COPY frontend .
# 挂载构建缓存目录，缓存仅在package.json/package-lock.json变更时失效
RUN --mount=type=cache,target=/app/.angular/cache npm run build

如果你的Angular版本低于12，只需要在angular.json的build配置中手动开启缓存即可：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "cache": {
              "enabled": true,
              "path": ".angular/cache"
            }
          }
        }
      }
    }
  }
}

该方案完全符合预期，依赖库的编译结果会被持久化缓存，仅当依赖文件变更时才会重新编译，业务代码变更只会编译修改的业务部分，构建耗时和本地执行一致。

问题2替代方案 #

如果不想使用BuildKit缓存，可选择以下成熟方案：

1. 外置前端构建
   将前端构建步骤放到Docker外执行，本地或CI环境提前执行npm run build，Docker构建时直接拷贝已经编译好的dist目录到镜像中：

# 直接跳过容器内前端构建步骤，拷贝外置构建产物
COPY --from=dotnet-build /app/out .
COPY frontend/dist/film-portal wwwroot/

该方案适合本地开发调试场景，完全避免容器内的重复编译开销。
2. 基础镜像预构建
单独做一个前端基础镜像，仅包含node环境、依赖安装结果和Angular库预编译缓存，只有package.json/package-lock.json变更时才重新构建该基础镜像，日常业务代码构建直接基于该基础镜像执行，也能节省大量重复编译时间。
3. CI缓存复用
如果是在CI环境构建，可以把.angular/cache目录加入CI的全局缓存配置，每次构建前拉取缓存，构建后更新缓存，效果和Docker挂载缓存完全一致。

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