Angular生产环境部分用户访问时样式周期性丢失如何解决？

根因分析 #

• 样式文件内容为HTML是核心判断依据：请求静态css资源时，nginx未找到对应文件，触发try_files $uri $uri/ /index.html =404规则，将首页HTML内容作为css资源返回，浏览器无法解析就会出现样式全丢失的问题。
• 仅生产环境出现的原因：生产环境部署时通常会直接清空旧构建产物再上传新文件，Angular生产构建的静态资源文件名带内容哈希（如styles.2f8a3d.css），部署后旧哈希的资源文件被删除，用户之前打开的页面缓存了旧的资源路径，再次请求就会触发兜底逻辑返回HTML。staging环境部署频率低、用户访问时长通常较短，因此不会触发该问题。
• 刷新后恢复的原因：刷新后浏览器会加载最新的index.html，里面引用的是新哈希的静态资源路径，匹配到存在的文件就可以正常加载。

修复方案 #

1. 优先修改nginx配置，隔离静态资源请求逻辑 #

在你的default.conf中新增静态资源专属匹配规则，避免静态资源请求走首页兜底：

server {
    listen 80;

    # 新增静态资源匹配规则，放在location /之前
    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
        root /usr/share/nginx/html;
        # 带哈希的静态资源可设置长期缓存，无需重复请求
        expires 365d;
        add_header Cache-Control "public, immutable";
        # 资源不存在直接返回404，不要返回HTML内容
        try_files $uri =404;
    }

    location / {
        # kill cache
        expires -1;
        sendfile off;
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache';
        if_modified_since off;
        etag off;

        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}

修改后重载nginx配置即可生效。

2. 调整部署策略，保留历史静态资源 #

修改CI/CD部署脚本，不要直接清空/usr/share/nginx/html目录再上传新构建产物，改为直接覆盖上传，旧的哈希资源至少保留72小时再清理，保证部署时段正在访问应用的用户请求旧资源时能正常命中。

3. 确认Angular生产构建配置 #

检查angular.json中生产环境配置的outputHashing项是否为all，确保所有静态资源都带内容哈希，避免文件名重复导致的缓存异常：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "outputHashing": "all",
              // 其余配置保持不变
            }
          }
        }
      }
    }
  }
}

4. 额外排查项 #

如果生产环境接入了CDN，检查CDN的缓存规则，确保CDN不会缓存index.html内容到静态资源请求上，有条件可以将静态资源和页面请求拆分到不同域名，避免兜底规则互相影响。

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