如何为Angular CLI的懒加载模块配置Budgets预算？

我刚好踩过这个坑，在Angular CLI 1.7里给懒加载模块加预算其实很直接，核心是要找准懒加载chunk的名称——毕竟你用了--named-chunks参数，每个懒加载模块都会生成一个带明确标识的bundle。

先教你怎么确认chunk名称：

• 先跑一次ng build -prod --named-chunks命令
• 打开生成的dist目录，找到你的懒加载模块对应的JS文件，比如仪表盘模块的文件可能叫dashboard.abc123.js，这里的dashboard就是你要用到的bundle名称

接下来，把这个名称加到你的budgets数组里就行，格式和默认的common、inline配置完全一致。举个实际配置的例子：

"budgets": [ 
  { "type": "bundle", "name": "common", "baseline": "50kb", "warning": "25kb" }, 
  { "type": "bundle", "name": "inline", "baseline": "50kb", "warning": "25kb" },
  // 给懒加载的dashboard模块设置预算
  { 
    "type": "bundle", 
    "name": "dashboard", 
    "baseline": "100kb", 
    "warning": "20kb", 
    "error": "50kb" 
  },
  // 另一个懒加载模块reports的配置
  { 
    "type": "bundle", 
    "name": "reports", 
    "baseline": "80kb", 
    "warning": "15kb", 
    "error": "30kb" 
  }
]

简单解释下参数：

• baseline是你期望的bundle基准大小
• warning是当bundle比baseline超出这个值时，构建会抛出警告
• error是当超出这个阈值时，构建直接失败（可选，不需要可以删掉这个字段）

要注意的是，chunk名称由你的模块路径和--named-chunks的生成规则决定，比如模块在src/app/admin/admin.module.ts的话，生成的chunk名称可能是admin或者app-admin，具体以dist目录里的实际文件名为准。

如果有多个懒加载模块，只需要给每个模块都添加一条对应的budgets配置就好，格式和默认bundle配置完全一致。

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