在生产中创建 React App 和 CSS 缓存

问题描述 投票：0回答：1

我有一个使用 Create React App 创建的中等大小的 React 应用程序（它有一个 .NET 后端）。当我在本地运行它时，缓存没有问题 - 我对 CSS 进行了更改，并且立即在浏览器中看到了更改。但是，当我将应用程序部署到 Azure 应用服务时，用户看不到任何样式更改，直到他们按下“清空缓存并硬重新加载”按钮。我的用户根本不懂技术，并且为此苦苦挣扎 - 有没有办法在部署新版本的应用程序时强制刷新。

我想也许在生产中向 CSS 文件名添加哈希值可以解决这个问题，但看起来这需要弹出应用程序，我不确定它是否会起作用。

create-react-app browser-cache
1个回答
0
投票

如果您使用版本命名 css 文件，它将自动导致网站“正确”重新加载，因为它将需要以前未获取的文件。 例如：

旧版本使用 my_site_1.css 新版本使用 my_site_2.css

浏览器将请求新文件，并且不会缓存该文件，因此会获取新文件。

对此进行变体以节省工作，您可以使用随机查询参数进行查询，导致每次都会加载，这将有一个罕见的边缘情况，即相同的数字会出现两次

看起来像这样：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic CSS Version</title>
    <script>
        function loadStylesheet() {
            var link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = '/css/stylesheet.css?v=' + Math.random();
            document.head.appendChild(link);
        }

        loadStylesheet();
    </script>
</head>

或者您可以尝试清除本地存储

如果您的网站是通过 iss 部署的，您可以这样编辑它

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <caching enabled="false" enableKernelCache="false" />
    </system.webServer>
</configuration>

如果您以不同的方式托管它，它可能有类似的选项

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.