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

Question

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

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

它没有帮助我更改静态资产的缓存策略（我有图片）。

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

如何设置自定义标题？提前致谢！

Answer 1

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

1. Proxying API Requests in Development
2. Deployment

您也可以尝试using a web server like Nginx to proxy 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;
}