如何在create react应用程序中为index.html指定缓存控制标头

如何在create react应用程序中为index.html指定缓存控制标头,html,reactjs,caching,create-react-app,Html,Reactjs,Caching,Create React App,我正在尝试遵循create react app.dev的指南: 为了向用户提供最佳性能,最佳做法是为index.html指定缓存控制头,以及在build/static中指定文件。此标头允许您控制浏览器和CDN缓存静态资产的时间长度。如果您不熟悉Cache Control的功能,请参阅本文以获得一个很好的介绍 对生成/静态资产使用Cache Control:max age=31536000和Cache Control:no Cache for everything是一个安全有效的起点,可确保用户浏

我正在尝试遵循create react app.dev的指南:

为了向用户提供最佳性能,最佳做法是为index.html指定缓存控制头,以及在build/static中指定文件。此标头允许您控制浏览器和CDN缓存静态资产的时间长度。如果您不熟悉Cache Control的功能,请参阅本文以获得一个很好的介绍

对生成/静态资产使用Cache Control:max age=31536000和Cache Control:no Cache for everything是一个安全有效的起点,可确保用户浏览器始终检查更新的index.html文件,并将所有生成/静态文件缓存一年。请注意,您可以安全地使用build/static上的一年到期,因为文件内容哈希已嵌入到文件名中

在index.HTML中使用HTML标题是否正确?例如:

<meta http-equiv="Cache-Control" content="max-age: 31536000, no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

(贷项:及)


如果是这样,我如何遵循文档中的建议,设置“构建/静态资产的最大年限=31536000,缓存控制:其他所有内容都不缓存”?我不知道如何为不同的资产设置不同的控件。

这些标题需要由发送内容并设置标题的服务器设置。这些是HTTP头,它不会在react中或使用react进行处理。

正如Evans提到的,应该从服务器端设置这些头。后端编程语言/服务器之间实际设置头的方式不同

以下是几个例子:

  • Node.js
    res.setHeader('Cache-Control','no-Cache')
  • Nginx
    add_头缓存控制无缓存

  • 您可以在为资产文件提供服务的服务器/CDN上指定不同的缓存行为

    示例:如果您使用的是AWS S3 bucket,则可以在对象的元数据属性下执行此操作

    参考:


    这些应该在为您的生产构建文件提供服务的服务器端的响应头中设置。在哪里?当我们在react中运行build命令时,它会生成一个index.html文件和一个“static”文件夹,我们可以直接上传到服务器上。谢谢,如果我想使用缓存控制,根据上面引用的文档:“对构建/静态资产使用缓存控制:max age=31536000,而缓存控制:其他所有内容都不使用缓存是一个安全有效的起点,可以确保用户的浏览器始终检查更新的index.html文件”,我该如何做?这是在后端服务器中完成的吗?还是在index.html头中完成的?