Angular 14+生产部署：需保留旧哈希文件还是删除？

核心问题拆解 #

你遇到的矛盾很典型：删旧文件会导致还在用旧缓存的用户请求404，留着又怕dist文件夹越变越大。本质是要平衡用户访问稳定性和服务器存储成本。

最佳部署策略 #

1. 部署时绝不立刻删除旧哈希文件 #

Angular编译后的静态资源（JS/CSS/图片等）都带唯一哈希后缀（比如main.abc123.js），新版本的文件哈希会完全不同，和旧文件不存在冲突。保留旧文件的目的是：

• 兼容还没完成缓存更新的用户：Service Worker可能还在后台同步新版本，或者用户的浏览器缓存还没触发刷新，这时候他们的请求还是指向旧哈希文件，删了就会报404
• 不需要担心文件冲突：新旧文件哈希不同，不会出现覆盖或混淆的问题

2. 安全清理旧文件的几种方法 #

方法一：按版本目录隔离部署

每次编译后，把生成的文件放到带版本号的子目录里（比如dist/v202405201430），然后用软链接（Linux/macOS用ln -s，Windows用mklink）把dist/current指向当前活跃的版本目录。

• 清理时直接删除旧版本的子目录即可，完全不会影响当前在线的用户
• Nginx等服务器配置里指向dist/current目录，无需修改配置

方法二：基于哈希列表的精准清理

每次编译完成后，记录当前生成的所有文件的哈希列表（可以从Angular生成的ngsw.json或asset-manifest.json里提取），然后写个简单脚本遍历dist目录，删除不在当前列表里的旧文件。示例Node脚本：

const fs = require('fs');
const path = require('path');

const distDir = path.join(__dirname, 'dist');
// 读取当前版本的所有文件（过滤掉目录）
const currentFiles = new Set(
  fs.readdirSync(distDir)
    .filter(file => fs.statSync(path.join(distDir, file)).isFile())
);

// 删除不在当前列表的旧文件
fs.readdirSync(distDir).forEach(file => {
  const filePath = path.join(distDir, file);
  if (fs.statSync(filePath).isFile() && !currentFiles.has(file)) {
    fs.unlinkSync(filePath);
    console.log(`清理旧文件：${file}`);
  }
});

• 这个方法精准，不会误删任何当前在用的文件
• 可以把脚本加到Angular的部署流程里，每次部署后自动执行

方法三：定时清理旧文件

如果不想每次部署都处理，可以设置定时任务（比如用Linux的cron，或者云服务器的定时任务），删除N天以前的文件。比如设置删除7天前的文件：

# Linux cron 示例：每天凌晨2点删除dist目录下7天前的文件
0 2 * * * find /path/to/dist -type f -mtime +7 -delete

• 这个方法简单粗暴，但要确保时间窗口足够长（比如7天），让大部分用户已经完成缓存更新

3. 配合Service Worker加速旧缓存淘汰 #

• 确保ngsw-config.json里的配置正确，开启版本自动检测：新版本部署后，Service Worker会自动拉取新的ngsw.json，对比版本号后下载新资源
• 在应用里添加一个“新版本已更新，请刷新页面”的提示，引导用户主动刷新，加快旧缓存的淘汰速度，减少旧文件的留存时间

总结 #

• 部署时必须保留旧哈希文件，这是避免回头用户404的核心
• 用版本目录、哈希脚本或定时任务三选一清理旧文件，平衡存储成本
• 结合Service Worker的更新机制，进一步降低旧文件的留存需求

内容的提问来源于stack exchange，提问作者Kristjan O.