Angular 8升级到9后SCSS文件超出预算限制问题求助

问题背景 #

升级到Angular 9后执行ng build --prod时，多个组件SCSS触发预算错误，但未修改过这些样式文件，调整预算并非合理解决方案。当前angular.json相关配置：

"buildOptimizer": true,
"budgets": [
  {
    "type": "initial",
    "maximumWarning": "5mb",
    "maximumError": "6mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "6kb",
    "maximumError": "10kb"
  }
]

可能原因及解决方法 #

1. 组件中引入了全局样式文件 #

Angular 9对组件样式的编译逻辑发生变化，若组件SCSS中通过@import引入全局样式（如全局变量、框架样式），这些样式会被完整打包进组件样式中，导致体积超标。

解决步骤：

• 打开报错的组件SCSS文件，移除其中的全局样式@import语句；
• 将该全局样式文件添加到angular.json的build.options.styles数组中全局引入，示例：

  "styles": [
    "src/styles/global-vars.scss",
    "src/styles.scss"
  ]
  

• 重新执行ng build --prod验证。

2. Sass依赖版本变更导致编译体积变大 #

升级Angular时可能自动升级了node-sass/dart-sass或sass-loader的版本，不同版本的Sass编译输出的CSS体积存在差异，部分新版本可能保留更多冗余代码。

解决步骤：

• 查看项目升级前的package.json（可通过Git历史获取），记录当时的Sass相关依赖版本；
• 在当前package.json中指定旧版本，例如：

  "node-sass": "^4.14.1",
  "sass-loader": "^8.0.2"
  

• 执行npm install或yarn install重新安装依赖，再执行构建命令。

3. Build Optimizer对样式的处理逻辑问题 #

Angular 9的buildOptimizer在处理组件样式时可能存在异常，导致未压缩或未移除冗余样式。

解决步骤：

• 临时关闭buildOptimizer测试：将angular.json中的buildOptimizer设为false，执行构建看是否还报错；
• 若关闭后恢复正常，可针对性调整样式优化配置，保留buildOptimizer的同时优化样式处理：

  "optimization": {
    "styles": {
      "minify": true,
      "inlineCritical": false
    }
  }
  

• 重新构建验证效果。

4. 组件样式Tree Shaking失效 #

Angular 9的组件样式Tree Shaking可能存在bug，导致未使用的样式未被移除，进而体积超标。

解决步骤：

• 使用Angular DevTools查看组件打包后的样式内容，确认是否存在大量未使用的冗余代码；
• 手动清理组件中未使用的样式，或确保optimization.styles.minify设为true以启用内置样式压缩优化。

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