我如何知道我的 index.html 是否缓存在我的 CRA 应用程序中？为什么它不存在于网络选项卡中？

Question

我想为我的index.html、as recommended in docs设置Cache-Control: no-cache。

对于我的 js 块，我可以在我的开发工具的网络选项卡中找到它们并在其中查看 headers：

但是我的 index.html 不在网络选项卡中：

这是为什么？我怎样才能确保它上面有 Cache-Control: no-cache header？

我可以在源选项卡中看到索引

该应用程序由生产服务器（而不是 CRA 开发服务器）提供服务，并且 CRA 服务工作者被禁用。

Answer 1

如果我没看错，您想关闭 index.html 的服务器缓存。

有很多方法可以做到这一点。以下是您可以在服务器端进行的一些配置。

NGINX：（nginx.conf）

location / {
    gzip_static on;
    try_files $uri @index;
}

location @index {
    add_header Cache-Control no-cache;
    expires 0;
    try_files /index.html =404;
}

IIS: (web.config)

<?xml version="1.0" encoding="UTF-8"?>
<configuration>    
  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>    
</configuration>

或者您可以使用 html meta tag 配置。

Answer 2

我在网络选项卡中看不到标记为“索引”的请求的原因是因为我没有直接请求 index.html，我在请求特定的应用内 url。我可以在当前 URL 下的 devtools 网络选项卡中找到相应的请求，它在 type 列中有 text/html。

我如何知道我的 index.html 是否缓存在我的 CRA 应用程序中？为什么它不存在于网络选项卡中？

How do I know if my index.html is being cached in my CRA app? And why is it not present in network tab?

cache-control

browser-cache

google-chrome-devtools

create-react-app