Sass Performance regression after update from v14 to v15

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.2.2

Description

I’ve just updated angular from 14.2.2 to 15.0.0 and I see increased build times with 50%. It seems related to SASS. I remember I had similar issues when upgrading to v12, but that time there was a migrator guide. I did a CPU-profile, and it, together with all our scss files (except the components), is uploaded here: https://github.com/JonWallsten/monorepo-new/tree/sass-debug/temp

We have multiple apps, but I uploaded one app and the shared library (built with ng-packagr) as an example.

Please note that the profile is not capturing the entire build since DevTools crashes when trying. But it’s clear enough that SASS is the issue since the time it covers in the profile is the same time the full build dock in the previous version.

Chart: (The green color is sass-related)

Here’s a “Bottom up” list from one of my profiles:

Please let me know if I can collect enable some other debugging information.

Minimal Reproduction

Since this happens in a complex setup with many files I’m not sure it would be easy to detect the issue with a few files. I think it’s a situation where small thing adds up in the end.

Exception or Error

No response

Your Environment

Angular CLI: 15.0.0
Node: 18.12.0
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 15.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0
@angular-devkit/schematics      15.0.0
@ngtools/webpack                15.0.0
@schematics/angular             15.0.0
ng-packagr                      14.2.1
rxjs                            7.5.6
typescript                      4.8.3
webpack                         5.74.0

Anything else relevant?

We’re using AngularWebpackPlugin to build. And we have a monorepo setup with paths

new AngularWebpackPlugin({
    tsconfig: helpers.rootPath('tsconfig.build.json')
})

TSConfig

tsconfig.build.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
      "outDir": "./dist",
      "strictNullChecks": true,
      "noImplicitReturns": true,
      "noFallthroughCasesInSwitch": false,
      "noImplicitAny": true,
      "strictFunctionTypes": true,
      "strictBindCallApply": true
  },
  "exclude": [
    "../../build-tools/"
  ],
  "files": [
    "./src/main.ts",
    "./src/environments/environment.prod.ts",
    "./typings/global.d.ts",
    "../../typings/global.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": true,
    "strictTemplates": true,
    "disableTypeScriptVersionCheck": true
  }
}

../../tsconfig.json

{
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": ".",
    "target": "ES2020",
    "module": "CommonJS",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noEmitHelpers": true,
    "noEmitOnError": false,
    "importHelpers": true,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "alwaysStrict": true,
    "strictNullChecks": false,
    "strictPropertyInitialization": false,
    "pretty": true,
    "sourceMap": true,
    "declaration": false,
    "preserveConstEnums": true,
    "downlevelIteration": true,
    "lib": [
      "dom",
      "ES2020"
    ],
    "paths": {
      "@oas/web-lib-angular": [
        "./packages/web-lib-angular/dist"
      ]
    }
  },
  "include": [
    "./build-tools/"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

[JonWallsten]

@alan-agius4 I see. Then I guess we’re out of options and have to accept the 70% in increased build time. Thanks for your time.

[alan-agius4]

With sass-loader, Sass compilation is always run in async mode. There is no option to force the sync behaviour.

sass-emedded is faster when used to compile large scss files like global css but it’s slower when used to compile smaller scss like components css. That was one of the reasons why in the CLI we do not use sass-embedded.

Angular’s implementation is exposed through the @angular-devkit, right? So I could potentially use the same solution the CLI is using? Ideally we would use the CLI, but legacy stuff is still stopping us.

No, the implementation is private.