如何在 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;
}