本地化文件React-i18next的缓存问题

Question

我正在使用react和react-i18next来本地化我的应用程序。问题是更新本地化文件后。有时我的 json 文件的旧版本会缓存在浏览器中。 如果用户清理缓存就可以解决这个问题，但我不能依赖用户知道如何清理缓存。 JSON 文件位于 public\locales 下。

我刚刚弄清楚如何禁用 i18next Translation.json 文件中的缓存

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    debug: true,
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      requestOptions: {
        cache: 'no-store',
      },
    },
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  });

这不是一个理想的解决方案。 更好的解决方案 - 每次构建后都需要重新检索翻译文件。 但现在这种情况不会发生了，有种翻译文件中没有添加hash的感觉 如何在新构建后防止缓存？

Answer 1

我使用

i18next-localstorage-backend

遇到了同样的问题，这意味着在浏览器中使用

localStorage

。

我只是在初始化选项中添加了一个

defaultVersion

，但为了每次构建都获得新版本，我必须生成一个随机版本号。

这是我的

i18n.ts

文件：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import resourcesToBackend from 'i18next-resources-to-backend';
import Backend from "i18next-chained-backend";
import LocalStorageBackend from "i18next-localstorage-backend";

function genRandonNumber(length : number) {
  const chars = '0123456789';
  const charLength = chars.length;
  let result = '';
  for ( var i = 0; i < length; i++ ) {
     result += chars.charAt(Math.floor(Math.random() * charLength));
  }
  return result;
}

const LOCAL_DOMAINS = ["localhost", "127.0.0.1"];
const HASH = genRandonNumber(10);

i18n
  .use(Backend)
  // detect user language
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  .init({
    // default fallback will be french
    fallbackLng: 'fr',
    // default namespace to load
    ns: 'header',
    // load languages ressources with lazy loading and caching client side
    backend: {
      backends: [
        LocalStorageBackend, // primary ressources (cache = window.localStorage)
        resourcesToBackend((language, namespace, callback) => {
          import(`/public/locales/${language}/${namespace}.json`)
            .then((resources) => {
              callback(null, resources)
            })
            .catch((error) => {
              callback(error, null)
            })
        }) // fallback ressources (json)
      ],
      backendOptions: [{
        expirationTime: 24 * 60 * 60 * 1000 * 7, // 7 days
        defaultVersion: "v" + HASH // generate a new version every build to refresh
      }]
    },
    // debug only in dev
    debug: LOCAL_DOMAINS.includes(window.location.hostname),

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  });

i18n.on('languageChanged', () => {
  document.documentElement.lang = i18n.language;
});

export default i18n;

我的

i18n

实例有点复杂，但最终会：

1. 使用

   localStorage

   减少网络连接并实现更快的翻译。
2. 借助命名空间，仅加载给定页面所需的

   JSON

   文件。
3. 更新

   localStorage

   每个新版本。

如果您使用多个后端（

JSON

文件和

localStorage

），则必须使用

i18next-chained-backend

。

Answer 2

您可以在文件请求参数中使用 package.json 中的版本。并不是每个版本都会更改翻译，但这绝对比禁用缓存或不更新要好

backend: {
    loadPath: `/locales/{{lng}}/{{ns}}.json?version=${version}`
}