Angular 8构建预算报错但文件未达阈值问题排查

嘿，这个问题我在Angular 8的项目里也踩过坑！结合你描述的几个现象——移除预算就能正常构建、差异加载导致文件重复、控制台大小和实际文件不匹配，核心原因其实和Angular 8早期的差异加载预算计算逻辑缺陷有关，具体来说：

1. 差异加载触发了合并计算的预算溢出 #

Angular 8的差异加载会同时生成ES5和ES2015两个版本的打包文件，但当时的Angular CLI在计算initial类型的预算时，会把两个版本的初始chunk大小加起来统计，而不是单独校验每个版本。

举个实际例子：假设你的ES5主chunk是1.4MB，ES2015主chunk是1.3MB，加起来就有2.7MB，远超你设置的1.6MB错误阈值，这就触发了报错，但你单独看每个文件都没到阈值——完美对应你说的"标记为initial的文件无论单独还是合计都未达到设定大小"（这里你可能是指单个文件，而CLI算的是两个版本的总和）。

2. 控制台输出和实际文件大小不匹配的真相 #

Angular CLI在控制台打印的初始chunk大小，默认只显示其中一个版本（一般是ES2015）的大小，不会把两个版本的合计值列出来，这就造成了"输出和实际文件大小对不上"的错觉。

3. 移除预算就能构建的逻辑很简单 #

当你删掉budgets配置后，Angular CLI直接跳过了大小校验环节，自然不会触发错误，所以两个版本的打包文件都能正常生成。

给你几个可行的解决方向 #

方案一：调整预算阈值到合理范围 #

既然是两个版本的总和触发了报错，你可以把maximumWarning和maximumError调高到两个版本合计后的合理值，比如设成3mb，这样就不会误触发了。

方案二：为每个版本单独配置预算 #

在Angular 8里，你可以通过name字段指定具体的chunk，分别给ES5和ES2015的初始chunk设置预算，示例配置如下：

"budgets": [
  {
    "type": "initial",
    "name": "main-es5",
    "maximumWarning": "1.5mb",
    "maximumError": "1.6mb"
  },
  {
    "type": "initial",
    "name": "main-es2015",
    "maximumWarning": "1.5mb",
    "maximumError": "1.6mb"
  }
]

这样CLI就会分别校验每个版本的chunk大小，不会再合并计算了。

方案三：禁用差异加载（如果不需要兼容旧浏览器） #

如果你的项目不需要支持IE11这类旧浏览器，可以在tsconfig.json里把target设置为ES2015，Angular CLI就只会生成单一版本的打包文件，预算计算也会恢复正常的单文件校验逻辑。

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