Create React App生产环境CSS缓存问题：Azure部署后样式不更新

无需Eject的哈希文件名方案 #

Create React App默认在生产构建时就会给静态资源（包括CSS）添加哈希后缀，完全不需要eject项目。执行npm run build后，build文件夹里的CSS/JS文件名会变成类似main.abc123.css的格式，哈希值会随文件内容变化自动更新。部署时把整个build文件夹推到Azure App Service就行，浏览器会因为文件名不同自动请求新资源，不会再缓存旧文件。

如果你的构建产物里没看到哈希，检查这两点：

• 确认是用npm run build（生产构建）生成的部署包，别用npm start（开发模式）的产物
• 检查package.json里的build命令有没有被修改，默认应该是react-scripts build

配合哈希的缓存控制增强策略 #

就算有哈希，也可以通过Azure配置让缓存逻辑更稳妥：

• 登录Azure门户找到你的App Service，进入配置 > 应用程序设置，添加或修改WEBSITE_DYNAMIC_CACHE为0，禁用动态内容缓存
• 进入配置 > 自定义域名 > HTTPS，确保开启HTTPS（浏览器对HTTPS资源的缓存策略更规范）
• 可选：在build文件夹根目录放一个web.config（适配.NET后端），给哈希命名的静态资源设置长缓存，给index.html设置禁止缓存：

  <configuration>
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
      </staticContent>
      <rewrite>
        <rules>
          <rule name="No cache for index.html" stopProcessing="true">
            <match url="^index\.html$" />
            <action type="CustomResponse" statusCode="200" />
            <serverVariables>
              <set name="RESPONSE_Cache-Control" value="no-cache, no-store, must-revalidate" />
            </serverVariables>
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

兜底的强制刷新方案 #

如果还是有用户缓存了旧的index.html，可以在应用里加个版本检测逻辑：

1. 在public/index.html的<head>里加个自定义meta标签记录版本：

   <meta name="app-version" content="v1.0.0" />
   

2. 在React入口文件（比如src/index.js）里加检测代码：

   fetch('/index.html')
     .then(res => res.text())
     .then(html => {
       const versionMatch = html.match(/name="app-version" content="(.*)"/);
       const latestVersion = versionMatch ? versionMatch[1] : '';
       const currentVersion = document.querySelector('meta[name="app-version"]').content;
       if (latestVersion && latestVersion !== currentVersion) {
         if (confirm('发现新版本，刷新页面就能获取更新啦！')) {
           window.location.reload(true);
         }
       }
     })
     .catch(err => console.log('版本检测失败', err));
   

   每次部署新版本时，更新index.html里的app-version值就行。

内容的提问来源于stack exchange，提问作者Cara Wilderman