ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Angular CLI 磁盘缓存(cli.cache)配置完全指南:环境控制、路径定制与 `ng cache` 命令实战

2026/9/20 6:43:53 拓冰建站 浏览量
Angular CLI 磁盘缓存(cli.cache)配置完全指南:环境控制、路径定制与 `ng cache` 命令实战 CLI开发工具前端构建构建工具代码生成前端【免费下载链接】angular-cliCLI tool for Angular项目地址https://gitcode.com/gh_mirrors/an/angular-cli点击查看免费下载导读Angular CLI 默认会把构建过程中的可缓存操作保存到本地磁盘并在重复构建时直接复用上一次的执行结果从而显著缩短应用与库的构建、测试耗时。本文以 Angular CLI 官方cache命令的 long-description 文档为核心结合本仓库angular-cli中cache命令源码、workspace 配置 schema 与构建器缓存实现系统讲解cli.cache配置对象环境、开关、路径、CI环境变量的判定机制以及ng cache enable/disable/clean/info四个子命令的实战用法。读完本文你将能够精确控制 Angular 工作区中磁盘缓存的启用时机、存储位置与清理方式。一、缓存机制Angular CLI 默认的磁盘持久化按官方 long-description 文档packages/angular/cli/src/commands/cache/long-description.md的说明Angular CLI默认会在磁盘上保存一系列可缓存的操作cachable operations。当你再次运行相同的构建时构建系统会恢复上一次构建的状态并复用之前已执行过的操作从而缩短构建和测试应用、库所需的时间。这意味着在大多数场景下你无需任何额外配置就能享受增量构建带来的提速——例如 webpack 的 babel 编译缓存、Angular 编译器的中间产物等都会被持久化到本地磁盘供后续命令复用。二、配置入口在 Workspace 配置中声明cli.cache2.1 配置位置与完整示例默认缓存设置可以通过在Workspace 配置即angular.json中添加cli.cache对象来修改。该对象位于配置文件顶层的cli字段下必须放在projects区块之外{ $schema: ./node_modules/angular/cli/lib/config/schema.json, version: 1, cli: { cache: { // ... }, }, projects: {}, }当前仓库中与此对应的 JSON Schema 定义位于 packages/angular/cli/lib/config/workspace-schema.jsoncli.cache小节它明确了cache对象支持的全部属性及其类型属性类型默认值说明enabledbooleantrue是否启用磁盘缓存environmentstringlocal缓存生效的环境枚举值为local、ci、allpathstring.angular/cache缓存的基础路径base path注意 Schema 中additionalProperties被设为false因此不能随意添加未知属性否则配置校验会失败。2.2 读取逻辑与默认值兜底从源码实现看packages/angular/cli/src/commands/cache/utilities.ts 中的getCacheConfig()函数按以下优先级读取配置读取workspace.extensions[cli]若不是 JSON 对象则整体回退到默认值再读取cli[cache]同样需为 JSON 对象对path、environment、enabled三个字段逐一做默认值兜底分别为.angular/cache、local、true。也就是说即使你的angular.json完全没有配置cli.cache构建系统依然会按照上述默认值启用本地磁盘缓存。三、缓存环境Cache environments精确控制缓存的生效范围3.1 三种环境的语义按官方文档磁盘缓存默认只在本地local环境启用。environment的取值及其语义如下all在所有机器上启用磁盘缓存包括本地开发机与 CI 机器local仅在开发机器上启用磁盘缓存CI 机器上自动关闭ci仅在持续集成CI系统上启用磁盘缓存本地开发机自动关闭。三种模式的核心价值在于避免缓存带来的环境差异例如在 CI 上机器间共享工作区、缓存内容可能与构建上下文不匹配默认的local模式可以让 CI 自动绕开磁盘缓存。3.2 CI 环境判定CI环境变量官方 long-description 用一个提示框特别强调The Angular CLI checks for the presence and value of theCIenvironment variable to determine in which environment it is running.Angular CLI 会检查CI环境变量的存在与取值以判断当前运行在何种环境。这一判定逻辑在仓库中有两处实现佐证在 packages/angular/cli/src/utilities/environment-options.ts 中isCI由parseTristate(process.env[CI]) true得出——只有CI取值为1或true不区分大小写时才认定为 CI 环境在构建器侧 packages/angular_devkit/build_angular/src/utils/normalize-cache.ts 中同样通过process.env[CI]判断isCI然后依据environment计算cacheEnabledci模式只在 CI 上启用local模式只在非 CI 上启用all模式始终启用。3.3 修改环境命令行与手改配置要把环境设置改为all可以直接在终端执行命令作用于当前工作区的angular.jsonng config cli.cache.environment all该命令等价于在angular.json中写入{ cli: { cache: { environment: all } } }在 packages/angular/cli/src/commands/cache/utilities.ts 的updateCacheConfig()中可以看到这类修改通过workspace.extensions[cli]上就地创建/更新cache对象并调用workspace.save()落盘因此ng config是安全、受 Schema 校验的官方修改途径。四、缓存路径Cache path定制缓存存储位置4.1 默认路径与修改命令按官方文档默认情况下.angular/cache被用作存储缓存结果的基础目录base directory。如果想改为.cache/ng执行ng config cli.cache.path .cache/ng注意命令中的路径参数带引号以避免 shell 对点号开头目录名的解析歧义。4.2 路径解析的细节Git Worktree 支持与版本化子目录修改后的相对路径并不是简单拼在angular.json所在目录下仓库源码揭示了更精细的解析规则packages/angular/cli/src/commands/cache/utilities.ts 中的getCacheBasePath()会如果配置的是绝对路径直接采用否则从工作区根目录向上逐级查找.git若发现是 Git worktree.git为包含gitdir:指令的普通文件且存在commondir则把缓存目录解析到该 worktree 的公共 Git 目录附近保证同一仓库的多个 worktree 共享同一份缓存构建器侧 packages/angular_devkit/build_angular/src/utils/normalize-cache.ts 在基础路径下还会追加版本号子目录例如/.angular/cache/v17.0.0让不同 CLI 大版本之间的缓存互不污染升级后自动失效重建。因此当你在ng cache info中看到的 Path 与磁盘上真实目录可能存在版本号层级差异这是设计使然。五、缓存运维命令ng cache子命令实战cache是 Angular CLI 的一级命令定义于 packages/angular/cli/src/commands/cache/cli.ts描述为 Configure persistent disk cache and retrieve cache statistics.它本身没有独立动作必须配合下列子命令使用demandCommand(1)强制要求子命令5.1ng cache enable/ng cache disableng cache enable别名on为工作区中所有项目启用磁盘缓存ng cache disable别名off为工作区中所有项目禁用磁盘缓存。实现位于 packages/angular/cli/src/commands/cache/settings/cli.ts本质是调用updateCacheConfig(workspace, enabled, true/false)写入cli.cache.enabled。5.2ng cache clean删除磁盘上的持久化缓存实现见 packages/angular/cli/src/commands/cache/clean/cli.ts。它读取cli.cache.path解析出的实际目录然后以force: true, recursive: true, maxRetries: 3的方式递归删除。当你怀疑缓存损坏例如出现奇怪的编译错误、产物不更新时这是首选排障手段。5.3ng cache info在控制台打印磁盘缓存的配置与统计信息实现见 packages/angular/cli/src/commands/cache/info/cli.ts典型输出包含Cache Information Enabled : Yes Environment : local Path : /path/to/workspace/.angular/cache Size on disk : 123.45 MB Effective Status : Enabled (current machine)其中Effective Status当前机器的实际生效状态值得特别关注它会根据environment与isCI计算info/cli.ts——例如environment为local而当前处于 CI 时虽然Enabled显示Yes但Effective Status会显示Disabled (current machine)。这解释了为什么配置看起来已开启、构建却未命中缓存环境限制在起作用。六、缓存与构建流程的衔接缓存配置不只影响ng cache命令本身还会被构建器读取并注入实际构建工具。在 packages/angular_devkit/build_angular/src/tools/webpack/configs/common.ts 中可以看到webpack 配置的cacheDirectory被设置为(cache.enabled path.join(cache.path, babel-webpack)) || false——即只有缓存启用时才为 babel-loader 提供babel-webpack子目录作为编译缓存目录否则显式关闭。也就是说cli.cache的启停状态会直接影响 webpack/babel 等底层工具的实际缓存行为这正是复用已执行操作、减少构建时间的具体落地路径。七、常见问题与最佳实践CI 上缓存未生效确认angular.json中cli.cache.environment是否为all或ci并用ng cache info查看Effective Status多数 CI 平台默认已设置CItrue满足local模式自动关闭的判断条件。修改路径后旧缓存未清理cli.cache.path只影响后续缓存写入位置旧目录不会自动删除可手动删除或执行ng cache clean后再按新路径重建。遇到诡异构建结果优先执行ng cache clean清除可能损坏的缓存再重新构建clean使用force: true即使目录不存在也不会报错。多 Git worktree 场景缓存路径会解析到公共 Git 目录附近以共享缓存见 utilities.ts 的 worktree 处理逻辑无需手工为每个 worktree 单独配置路径。升级 CLI 大版本缓存目录按版本号隔离normalize-cache.ts旧版本缓存自动失效无需手动清理。通过合理配置cli.cache.environment、enabled与path再配合ng cache enable/disable/clean/info四个子命令你可以在本地开发与 CI 流水线中精确掌控 Angular CLI 的磁盘缓存行为在保证结果正确性的前提下最大化构建与测试的复用效率。赞分享CLI开发工具前端构建构建工具代码生成前端【免费下载链接】angular-cliCLI tool for Angular项目地址https://gitcode.com/gh_mirrors/an/angular-cli点击查看免费下载相关推荐Ollama HTTP缓存控制ETag与Cache-Control配置完全指南Ollama HTTP缓存控制ETag与Cache Control配置完全指南 想要优化Ollama大语言模型本地部署的性能掌握HTTP缓存控制是提升响应速人工智能大模型模型推理服务本地部署后端LLM 网关mise cache clear 命令完全指南清理工具缓存、任务输出缓存与环境缓存mise cache clear 命令完全指南清理工具缓存、任务输出缓存与环境缓存 mise cache clear 是 misedev tools、env开发工具CLINautilus Trader 缓存机制完全指南Cache 架构、配置与实战调用Nautilus Trader 缓存机制完全指南Cache 架构、配置与实战调用 本文是 Nautilus Trader 事件驱动交易引擎中 Cache 组件金融科技后端上一篇突破AI响应瓶颈Pydantic AI流式处理与工具调用全解析下一篇IsaacLab CloudXR 远程可视化连不上4 类典型故障的排查与修复创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考