如何在 React 应用程序中更改 static 资产的缓存策略（使用 create-react-app 创建）

Question

我已经使用 React.js（使用 create-react-app）创建了一个应用程序，但我找不到为我的 static 资产更改缓存策略（我对 max-age 感兴趣）的方法。 默认情况下，我的应用程序的 static 资产（包括当我使用带有“npm run build”的生产构建时）的 max-age 为 0。

我在官方 create-react-app 文档中找到的只是： https://create-react-app.dev/docs/production-build/#static-file-caching

它没有帮助我更改我的 static 资产的缓存策略（我有图像）。

我还尝试使用“获取”方法并设置自定义 header，但我最终得到了重复值“max-age=99999，max-age=0”。 在缓存策略方面，create-react-app 似乎绕过了您的自定义标头。

如何设置自定义 header？ 预先感谢！

Answer 1

如果您的 web 服务器无法设置这些标头，那么 Workbox和Service Worker 模式将是您进行客户端缓存的最佳选择。 您是否还能够查看这些 create-react-app 文档？

1. 在开发中代理 API 请求
2. 部署

您也可以尝试使用 web 服务器（如 Nginx）代理 create-react-app ，删除其标题，并添加您自己的：

location / {
   ...

   // hide create-react-app response header
   proxy_hide_header max-age;

  // send your own header to client
  add_header max-age 99999;
}