Angular 8国际化打包后vendor.js体积异常增大如何优化？

碰到Angular i18n构建后vendor体积暴涨的问题确实头疼，我帮你梳理几个实用的解决办法，亲测在Angular 8里有效：

1. 确保语言配置里开启完整优化开关 #

命令行参数有时会被angular.json里的默认配置覆盖，你需要直接在对应语言的构建配置中明确启用所有优化选项：

"projects": {
  "你的项目名": {
    "architect": {
      "build": {
        "configurations": {
          "es": {
            "localize": ["es"],
            "optimization": true,
            "buildOptimizer": true,
            "aot": true,
            "vendorChunk": true,
            "commonChunk": true,
            "outputHashing": "all",
            "namedChunks": false
          }
        }
      }
    }
  }
}

配置完成后，直接执行ng build --prod --configuration=es即可，不需要额外加一堆命令行参数。

2. 切换到@angular/localize构建方式 #

Angular 8已经支持更高效的@angular/localize工具，替代旧的xlf文件手动处理流程，能更好地做树摇优化：

1. 先安装依赖：

   npm install @angular/localize --save
   

2. 在polyfills.ts中添加初始化代码：

   import '@angular/localize/init';
   

3. 更新angular.json里的语言配置，用localize字段指定目标语言，替换旧的i18n相关配置。

3. 分析vendor.js的具体构成 #

用source-map-explorer工具找出体积膨胀的根源：

1. 安装工具：

   npm install source-map-explorer --save-dev
   

2. 带source map构建：

   ng build --prod --configuration=es --source-map
   

3. 运行分析：

   source-map-explorer dist/你的项目名/vendor.*.js
   

   这会生成可视化报告，你能清楚看到是哪个库或模块占据了大量空间，比如可能是第三方库自带的全量语言包没被过滤掉。

4. 第三方库按需引入语言包 #

如果项目依赖了moment.js、lodash这类带多语言的库，默认会打包所有语言包，需要手动按需引入：

• moment.js示例：

  // 只引入核心和需要的语言
  import moment from 'moment';
  import 'moment/locale/es';
  import 'moment/locale/fr';
  import 'moment/locale/de';
  

• lodash示例：
  使用lodash-es配合按需导入，或者通过构建工具插件（如babel-plugin-lodash）自动树摇冗余代码。

5. 精简不必要的polyfills #

检查polyfills.ts文件，移除针对旧浏览器的不必要polyfill（比如IE相关的），可以根据browserslist文件里的目标浏览器列表来调整，减少无用代码被打包进vendor。

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