升级到Angular 13后main.js不缓存导致页面刷新慢，该如何解决？

问题原因 #

Angular 13 对默认构建规则、资源打包逻辑做了调整，升级后如果未同步调整Angular构建配置、服务器静态资源缓存规则，就会出现main.js每次都重新加载的问题。

具体配置步骤 #

• 第一步：确认Angular生产构建哈希配置
  打开项目根目录的angular.json文件，找到生产环境构建配置节点，确保outputHashing属性设置为all，配置示例如下：

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

开启该配置后，每次构建生成的main.js等静态资源都会自动带上内容哈希后缀（比如main.7a2f3b9c1d.js），只有文件内容发生变化时哈希才会更新，确保浏览器可以安全缓存未变更的资源。

• 第二步：配置服务器静态资源缓存头
  对带哈希后缀的.js、.css、图片等静态资源，配置长期缓存的HTTP响应头，示例配置如下：
  • Nginx 配置示例，添加到server节点下：

  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
      expires 1y;
      add_header Cache-Control "public, max-age=31536000, immutable";
  }
  

  • Apache 配置示例，添加到.htaccess文件：

  <FilesMatch "\.(js|css|png|jpg|jpeg|gif|ico|svg)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
  

• 第三步：配置入口HTML不缓存
  为了保证每次都能拿到最新的资源引用链接，需要对index.html设置不缓存的响应头：
  • Nginx 配置补充：

  location = /index.html {
      expires -1;
      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
  }
  

注意：不要使用ng serve启动的开发环境验证缓存，开发环境默认关闭静态资源缓存，必须使用生产构建包部署后验证。

验证方式 #

执行ng build --configuration production构建生产包，部署后打开浏览器控制台的网络面板，刷新页面查看main.js的响应头，确认Cache-Control符合配置要求，第二次刷新时状态码为200 (from disk cache)或者304即为配置生效。

问题现象参考 #

内容的提问来源于stack exchange，提问作者S.Sultan