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

Question

I have created an app using React.js (with create-react-app) and I cannot find a way to change the cache policy (I am interested in max-age) for my static assets. By default, the static assets of my app (including when I use the production build with 'npm run build') have a max-age of 0.

All I found in the official create-react-app docs was this: https://create-react-app.dev/docs/production-build/#static-file-caching

It did not help me change the cache policy for my static assets (I have images).

I also tried using the "fetch" method and setting a custom header, but I ended up having a duplicate value "max-age=99999, max-age=0". It looks like create-react-app bypasses your custom headers when it comes to cache policy.

How do I set a custom header? Thank in advance!

Answer 1

If your web server can't set those headers, Workbox and Service Worker patterns would be your best bet for client-side caching. Were you also able to review these create-react-app docs?

1. Proxying API Requests in Development
2. Deployment

You could also try using a web server like Nginx to proxy create-react-app , remove its headers, and add your own:

location / {
   ...

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

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