components: 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% 100% (15.0.4). 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) image

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

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
}

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 3
  • Comments: 16 (7 by maintainers)

Most upvoted comments

@alan-agius4: I’ve spent the morning catching up on all ongoing initiatives with speeding up SASS. Like: https://github.com/sass/sass/issues/3296 https://github.com/sass/dart-sass/issues/868 And everything seems to be a dead end right now. Our build times are up around 100% when compiling all our applications. The main application is upp around 300%. Of course it’s hard to accept the situation, but we can’t just stop updating Angular.

So, since I’m out of alternatives I’ve copied to files from angular-cli/angular_devkit/build_angular/sass/ and removed everything we don’t need, like the legacy implementation. The build time went from 171s to 52s for our main application (haven’t tested with all apps yet). Are there any plans of making these tools available for AngularCompilerPlugin users such as ourselves? I don’t mind keeping up to date by copying files since the price to pay is still small compared to the gain in build times.

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