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)
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
}
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 3
- Comments: 16 (7 by maintainers)
@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.