AngularJS 1.0.7结合angular-translate的首次加载性能问题咨询

首先给你明确两个关键信息：

1. 适配AngularJS 1.0.7的最新angular-translate版本是2.18.4，这是官方最后支持AngularJS 1.0.x分支的版本，你可以放心升级到这个版本（不用改动AngularJS核心），它完全支持你提到的按视图加载（部分加载）和命名空间特性。
2. 拆分大翻译文件的方案完全可行，而且是解决你当前性能问题的最优解之一，下面给你具体的实现步骤和额外优化建议：

一、实现按视图拆分翻译文件（使用$translatePartialLoader） #

1. 配置partial loader #

首先确保你引入了和angular-translate 2.18.4配套的angular-translate-loader-partial模块，然后在你的AngularJS模块中注入它：

angular.module('yourApp', ['pascalprecht.translate', 'angular-translate-loader-partial'])
  .config(function($translateProvider) {
    // 配置partial loader的基础路径，比如翻译文件放在/i18n/目录下
    $translateProvider.useLoader('$translatePartialLoader', {
      urlTemplate: '/i18n/{lang}/{part}.json'
    });

    // 设置默认语言
    $translateProvider.preferredLanguage('en');
  });

2. 按视图加载对应翻译文件 #

比如你有user视图和dashboard视图，就可以把翻译拆分成user.json和dashboard.json，在对应控制器（或路由的resolve阶段）加载所需的partial：

// 更优的做法是在路由resolve中预加载，避免视图加载后翻译延迟
angular.module('yourApp').config(function($routeProvider) {
  $routeProvider.when('/user', {
    templateUrl: 'user.html',
    controller: 'UserController',
    resolve: {
      loadTranslations: function($translatePartialLoader, $translate) {
        $translatePartialLoader.addPart('user');
        return $translate.refresh();
      }
    }
  });
});

3. 使用命名空间避免键冲突 #

如果不同视图的翻译键有重复，可以给每个partial加上命名空间前缀，配置的时候开启命名空间模式：

$translateProvider.useLoader('$translatePartialLoader', {
  urlTemplate: '/i18n/{lang}/{part}.json',
  // 开启命名空间
  namespace: true
});

然后在翻译文件中，键名可以写成user.title、dashboard.title，在模板中使用时：

<h1>{{ 'user.title' | translate }}</h1>

二、其他额外优化建议 #

• 启用翻译缓存：angular-translate支持缓存已加载的翻译文件，避免重复请求，配置方式：

$translateProvider.useLocalStorage(); // 使用localStorage缓存
// 或者使用sessionStorage
$translateProvider.useSessionStorage();

• 压缩翻译文件：把拆分后的json文件用工具压缩（比如JSON.minify），减少文件体积，进一步提升加载速度。
• 预加载核心翻译：把首页或全局通用的翻译（比如导航、按钮文本）单独拆成一个小文件，在应用启动时预加载，避免首页出现未翻译的文本。
• 延迟加载非关键翻译：对于一些用户很少访问的视图，比如设置页、帮助页，可以在用户首次进入该视图时再加载对应的翻译文件，而不是启动时全部加载。

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