React-i18next本地化文件缓存问题：新构建后如何避免加载旧翻译文件

你之前使用的cache: 'no-store'方案会强制每次都请求翻译文件，浪费带宽且拖慢加载速度。更合理的方案是给翻译文件路径追加唯一的版本标识，仅当版本更新时浏览器才会拉取新文件，无更新时复用本地缓存。

方案1：追加构建哈希查询参数（改造成本最低，无需改动文件结构） #

这个方案不需要调整你现有的public/locales目录结构，只需要两步修改：

步骤1：注入构建唯一标识到环境变量 #

在构建项目时，将当前构建的Git commit哈希、时间戳等唯一值作为环境变量注入项目。
以CRA项目为例，先安装cross-env包兼容多平台环境变量设置：

npm install cross-env --save-dev

修改package.json中的构建脚本：

{
  "scripts": {
    // 用Git短哈希作为版本标识
    "build": "cross-env REACT_APP_BUILD_HASH=$(git rev-parse --short HEAD) react-scripts build",
    // 也可以用时间戳作为版本标识，兼容性更强
    "build:timestamp": "cross-env REACT_APP_BUILD_HASH=$(date +%s) react-scripts build"
  }
}

如果是Vite项目，可以直接在vite.config.js中注入全局构建标识：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  define: {
    __BUILD_HASH__: JSON.stringify(Date.now().toString())
  }
})

步骤2：修改i18n配置的资源加载路径 #

在loadPath后拼接版本查询参数，同时可以删掉之前的cache: 'no-store'配置：

// CRA项目配置
i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    debug: true,
    backend: {
      loadPath: `/locales/{{lng}}/{{ns}}.json?v=${process.env.REACT_APP_BUILD_HASH}`,
    },
    interpolation: {
      escapeValue: false,
    },
  });

// Vite项目配置
backend: {
  loadPath: `/locales/{{lng}}/{{ns}}.json?v=${__BUILD_HASH__}`,
}

这个方案的优势是：

• 构建版本不变时，浏览器会一直复用缓存的翻译文件，加载速度快
• 发布新版本后，查询参数自动变化，浏览器会主动拉取最新的翻译文件
• 无需改动现有文件结构，改造成本极低

方案2：细粒度翻译文件哈希（仅翻译变更时更新缓存） #

如果希望只有翻译文件本身修改时才更新缓存，代码变更不影响翻译缓存，可以写一个小型脚本计算public/locales目录下所有文件的哈希值，将该哈希作为版本标识注入，实现更精细的缓存控制。

方案3：配置服务器缓存策略 #

除了加版本参数，还可以在Nginx、CDN等服务端配置/locales目录下JSON文件的缓存头：

location /locales {
  add_header Cache-Control "public, no-cache";
}

no-cache的作用是浏览器会先向服务器验证文件是否有更新，没有更新就复用本地缓存，有更新才拉取新文件，和版本参数方案配合使用效果更佳。

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