javascript - 如何更改 React 应用程序中静态资源的缓存策略(使用 create-react-app 创建)

Question

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

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

它没有帮助我更改静态资源的缓存策略(我有图像)。

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

如何设置自定义 header ？提前致谢!

Answer 1

如果您的网络服务器无法设置这些 header ，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 ，删除其 header ，然后添加您自己的 header :

location / {
   ...

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

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