Angular中Transloco翻译JSON文件版本控制避缓存最佳实践

下面是业内针对这类问题的几种主流解决思路，适配Angular+Transloco的场景：

1. 借助Angular原生构建的内容哈希机制 #

Angular本身支持给静态资源添加内容哈希，无需额外Webpack插件，步骤如下：

• 在angular.json的项目构建配置中，将outputHashing设为all（会给所有打包文件加哈希）或media（仅给媒体/资源文件加哈希）：

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "outputHashing": "media",
            // ...其他配置
          }
        }
      }
    }
  }
  

• 同时配置assets规则，让翻译文件输出到带哈希的路径：

  "assets": [
    "src/favicon.ico",
    {
      "glob": "**/*.json",
      "input": "src/assets/localization/transloco",
      "output": "assets/localization/transloco/[hash]",
      "watch": true
    }
  ]
  

• 最后修改Transloco加载器：先请求构建时生成的哈希映射文件（可通过自定义脚本或Webpack钩子生成），再拼接带哈希的路径加载翻译文件。

2. 服务器端配置缓存控制头 #

直接在服务器层设置翻译文件的缓存策略，强制浏览器验证文件更新，无需改动前端代码：

• Nginx配置示例：

  location ~* /assets/localization/transloco/.*\.json$ {
      add_header Cache-Control "no-cache, must-revalidate";
  }
  

• Apache配置示例：

  <FilesMatch "\.json$">
      Header set Cache-Control "no-cache, must-revalidate"
  </FilesMatch>
  

这种方案下，浏览器每次请求都会向服务器校验文件是否最新，避免旧缓存的问题。

3. 利用Transloco内置缓存配置 #

Transloco提供了内存缓存的控制选项，可在模块初始化时配置：

@NgModule({
  imports: [
    TranslocoModule.forRoot({
      cache: {
        // 设置缓存有效期（毫秒），比如1小时
        ttl: 3600000,
        // 也可直接禁用内存缓存
        // enabled: false
      },
      loader: {
        provide: TranslocoLoader,
        useClass: YourCustomLoader
      }
    })
  ]
})
export class AppModule { }

注意：这仅控制Transloco的内存缓存，若要解决浏览器磁盘缓存，需结合前面的方案。

4. 自定义Webpack配置生成带哈希的文件名 #

通过Angular自定义Webpack配置，给翻译文件添加内容哈希并生成映射表：

1. 安装自定义构建器：

   npm install @angular-builders/custom-webpack --save-dev
   

2. 根目录创建webpack.config.js，编写插件生成带哈希的翻译文件和映射表：

   const crypto = require('crypto');
   
   module.exports = {
     plugins: [
       {
         apply: (compiler) => {
           compiler.hooks.emit.tap('TranslocoHashPlugin', (compilation) => {
             const translationFiles = Object.keys(compilation.assets)
               .filter(f => f.startsWith('assets/localization/transloco/') && f.endsWith('.json'));
             const hashMap = {};
   
             translationFiles.forEach(file => {
               const content = compilation.assets[file].source();
               const hash = crypto.createHash('md5').update(content).digest('hex').slice(0, 8);
               const newFile = file.replace('.json', `.${hash}.json`);
               compilation.assets[newFile] = compilation.assets[file];
               
               const langKey = file.split('/').pop().replace('.json', '');
               hashMap[langKey] = newFile;
             });
   
             // 生成映射文件
             compilation.assets['assets/localization/transloco/hash-map.json'] = {
               source: () => JSON.stringify(hashMap),
               size: () => Buffer.byteLength(JSON.stringify(hashMap))
             };
           });
         }
       }
     ]
   };
   

3. 修改angular.json使用自定义构建器：

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": { "path": "./webpack.config.js" },
         // ...其他配置
       }
     },
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server"
     }
   }
   

4. 更新加载器逻辑，先读取映射表再加载对应文件：

   getTranslation(langAndScope: string) {
     return this.http.get('/assets/localization/transloco/hash-map.json').pipe(
       switchMap((hashMap: Record<string, string>) => {
         const filePath = hashMap[langAndScope] || `/assets/localization/transloco/${langAndScope}.json`;
         return this.http.get<Translation>(filePath);
       })
     );
   }
   

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