解决NX Monorepo库中'bundle initial exceeded maximum budget'错误

我创建了一个NX Monorepo工作区，仅包含nx.json文件及libs文件夹下每个库对应的project.json。使用@nx/angular 19.4.4版本构建整个项目时，出现组件样式和initial bundle超出预算的错误。尝试在库的project.json中添加budgets配置时，收到错误提示“NX 'budgets' is not found in schema”，请问该如何配置budgets以解决此问题？

构建错误信息 #

Warning: /<my-workspace>/libs/layout/src/lib/components/panel/panel.component.scss exceeded maximum budget. Budget 2.05 kB was not met by 1.55 kB with a total of 3.60 kB.

Warning: /<my-workspace>/libs/messenger/src/lib/components/messages-viewer/messages-viewer.component.scss exceeded maximum budget. Budget 2.05 kB was not met by 122 bytes with a total of 2.17 kB.

Warning: bundle initial exceeded maximum budget. Budget 512.00 kB was not met by 938.53 kB with a total of 1.45 MB.

Error: bundle initial exceeded maximum budget. Budget 1.05 MB was not met by 401.95 kB with a total of 1.45 MB.

尝试的配置 #

自定义budgets配置 #

"budgets": [
    {
      "type": "initial",
      "maximumWarning": "500kb",
      "maximumError": "1mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "2kb",
      "maximumError": "4kb"
    }
]

库project.json中尝试添加的位置 #

"targets": {
    "build": {
      "executor": "@nx/angular:package",
      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
      "options": {
        "project": "libs/messenger/ng-package.json"
      },
      "configurations": {
        "production": {
          "tsConfig": "libs/messenger/tsconfig.lib.prod.json",
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ]
        },
        "development": {
          "tsConfig": "libs/messenger/tsconfig.lib.json"
        }
      },
      "defaultConfiguration": "production"
    },
...
}

核心原因 #

你使用的@nx/angular:package执行器是用来构建Angular库为npm包的，它的配置schema里并不包含budgets字段——budgets是Angular应用构建器（@nx/angular:browser）的专属配置项，负责管控最终应用的打包资源大小。

具体配置步骤 #

1. 定位应用的project.json #

所有预算配置都需要在apps目录下的Angular应用项目的project.json中进行，而非libs下的库项目。

2. 配置组件样式预算 #

在应用的build目标（执行器为@nx/angular:browser）的options或configurations.production节点中添加budgets配置，调整组件样式的阈值：

"targets": {
  "build": {
    "executor": "@nx/angular:browser",
    "options": {
      // 其他配置...
      "budgets": [
        {
          "type": "anyComponentStyle",
          "maximumWarning": "4kb", // 根据需求调整警告阈值
          "maximumError": "6kb"    // 根据需求调整错误阈值
        }
      ]
    },
    "configurations": {
      "production": {
        // 其他生产环境配置...
      }
    }
  }
}

3. 配置initial bundle预算 #

同样在应用的build目标budgets数组中添加initial类型的配置，调整整体初始包的大小阈值：

"budgets": [
  // 组件样式配置...
  {
    "type": "initial",
    "maximumWarning": "1.2mb",
    "maximumError": "1.5mb"
  }
]

额外优化建议 #

如果调整预算阈值后仍需减小bundle大小，可尝试这些优化手段：

• 确保生产构建开启Tree Shaking（NX默认已配置）
• 对路由模块使用按需加载（lazy loading）
• 替换体积较大的第三方依赖为轻量替代方案
• 启用资源压缩（如CSS/JS压缩、图片优化）

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