原因

Question

我正在IIS上运行单页应用，并使用i18next库在我的应用中进行翻译。问题是，有时当我向translate.json文件添加新关键字并点击刷新时，浏览器仍会使用旧的缓存翻译文件，这会导致用户看到添加的关键字而不是翻译。例如。如果我添加关键字"somekey": "Some text here..."，则会显示somekey而不是指定的文字。

由于我的translation.json文件位于名为locales的文件夹中，如下所示：

locales
    en
      translation.json

我尝试将以下设置添加到web.config：

<location path="locales">
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
  </system.webServer>
</location>

但是，当我使用Chrome开发人员工具查看网络流量时，我注意到translate.json文件仍然来自缓存，并且缺少Cache-Control: no-cache标头。为什么这不起作用？什么是禁用文件缓存的正确方法？

编辑：刚刚再次检查了网站，看来translate.json文件现在有Cache-Control: no-cache标题，每次刷新页面时都会从服务器检索它。此时我认为该问题可能与我们的发布过程有关，而配置更改未应用。但不确定。

Answer 1

这实际上比看起来更棘手。我假设您正在使用角度转换模块。

我在加载json文件的地方进行了缓存清理：

$translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: 'AppScripts/i18n/{part}-{lang}.json' + '?cb=' + (new Date()).getTime()
    });

这样它就永远不会缓存语言文件，并会在每次请求时加载新文件（不刷新页面或清除缓存）。

完全忽略了Web配置设置，我相信因为插件使用ajax调用加载文件的方式。此外，json文件无法通过.net捆绑缩小，因为密钥在压缩时会发生变化，因此而不是＆＃34; MAIN.FIRSTNAME＆＃34;：＆＃34; First Name＆＃34;你将拥有类似于＆＃34; abc＆＃34;：＆＃34;名字＆＃34;由于视图具有原始名称，因此无法工作。

如果您保留一个版本，也可以使用该版本，只有在您发布新版本时才会破坏缓存，例如

    + '?v=' + myVersionVar

而不是使用当前时间戳，它将始终在每个请求上加载文件。

Answer 2

我使用组合SPA + i18next + IIS遇到了同样的情况，并注意到有时json文件尚未更新。

这在某些时候变得奇怪的主要原因是，自从Google Chrome第一次下载文件以来，您很可能更改了IIS的web.config设置。没有任何Cache-Control标题。

原因

json文件没有呈现Cache-Control：no-cache标头，因此在304-Not Modified响应之后，它开始使用google chrome的本地磁盘缓存。

解决方案

由

解决

1）在“网络”标签上清除Google Chrome的缓存（清除所有缓存也可以完成工作）

2）在 / locales / 文件夹中放置 web.config 文件，其中包含以下staticContent规则，location未指定path {1}}属性：

<?xml version="1.0" encoding="utf-8"?>
    <configuration>
        <location>
            <system.webServer>
                <staticContent>
                    <clientCache cacheControlMode="DisableCache" />
                </staticContent>
            </system.webServer>
        </location>
    </configuration>

正如the docs所述<location>代码：

path属性

使用缺少<location>属性的path适用于   配置设置到当前目录和所有子项   目录。

在这种情况下，我已将规则专门应用于/locales/文件夹，旨在不干扰网站上其他静态内容的缓存，例如图像，JavaScript文件等。预期的行为可能会有所不同根据您的解决方案的需求。

Answer 3

感谢@alx，使用以下内容并替换了version_number作为我的grunt版本的一部分。

$translateProvider.useStaticFilesLoader({
    prefix: 'locale/lang_',
    suffix: '.json?cd=version_number'    });

Answer 4

我遇到了类似的问题，我需要在每次构建后重新检索翻译文件。我找到的一个解决方案是，首先，添加一个插件，允许 webpack 构建哈希在运行时可用（将其添加到 webpack.config.js 文件中）：

webpack.ExtendedAPIPlugin()

这将允许您在应用程序的任何位置声明哈希

const hash = __webpack_hash__;

然后，在您的 i18next.init() 后端部分，我将哈希作为参数添加到请求中。

`/locales/.json/hash=${hash}`

这样，每次新构建后的哈希值都会不同，并且在构建后的第一个请求中，将检索最新的翻译文件，从而防止它使用缓存。

Answer 5

如果我们在部署应用程序时启用了捆绑，该怎么办？如下。

Settings > Privacy > Diagnostics & Usage #if DEBUG BundleTable.EnableOptimizations = false; #else BundleTable.EnableOptimizations = true;

如何禁用i18next translation.json文件的缓存？

5 个答案:

原因

解决方案