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

6l7fqoea  于 2023-06-29  发布在  React
关注(0)|答案(2)|浏览(135)

我已经使用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在缓存策略方面绕过了你的自定义头。
如何设置自定义页眉?提前感谢!

webghufk

webghufk1#

如果您的Web服务器不能设置这些头文件,那么WorkboxService 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;
}
yduiuuwa

yduiuuwa2#

Create react app只是提供了一堆静态文件。它确实包含一个服务器,但它是一个开发服务器(当您运行npm start时)。因此,即使您找到了调整服务器配置的方法,也不会对已部署的应用程序产生任何影响。
部署应用时,您将提供CRA在运行npm run build时构建的静态文件包。您甚至可以使用像serve这样的静态服务器来提供服务。该服务器能够向客户端提供缓存控制头。(如果你想在本地使用serve,你可以查看文档并添加一个服务器配置来包含这些头文件)
因此,在应用程序代码本身中无法影响Cache-control头,这是您需要在用于部署应用程序的任何服务器中配置的内容。

相关问题