Optimization flag ensures very large deviations of the scss file sizes

[tobiasanton123]

Description

Follow up to issue: #19812

Sorry for the late creation of the example repo

I think I found a bug in Angular compiler: It is about the optimization flag in the angular.json file. 

As soon as I set the flag to false, a sample scss file with 70 lines of code has a size of 20kb. Variables are also imported in this file. Only variables and mixins are imported and no other css code. The variable file is about 400 lines in size and estimated 10 of the 400 variables are used in the scss file in question.

If I replace the variables with the values in the file and remove the import, the file falls below my warning size of 8kb.

Angular version 11.1.11 is used.

If I set the optimization flag to true, the the size of the example scss file with variable imports is also smaller than the 8kb warning size.

Sizes of the example scss file:

optimization flag false: 20 kb

optimization flag true: < 2 kb

🔬 Minimal Reproduction

Here is the example repo: https://github.com/tobiasanton123/angular-optimization-flag

The stepts to reproduce are described in the README.md

The name of the example scss file is home.scss and is located in pages/home

🌍 Your Environment

Angular CLI: 11.1.1
Node: 12.18.0
OS: darwin x64

Angular: 11.1.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.1
@angular-devkit/build-angular   0.1101.1
@angular-devkit/core            11.1.1
@angular-devkit/schematics      11.1.1
@angular/cli                    11.1.1
@schematics/angular             11.1.1
@schematics/update              0.1101.1
rxjs                            6.6.3
typescript                      4.1.3

[devoto13]

AFAICT in dev configuration, a long source map string is present, which increases the size. While in prod configuration, there are no source maps, hence the size is lower. Open dist/main-....js file and search for .admin-header to quickly locate what Angular CLI compiled the component styles to.

If you disable sourceMap in the dev configuration, there will be no error. So I assume this works as intended.

[Spielboerg]

This seems plausible. If that is the reason, perhaps the anyComponentStyle limits for the dev build in the initially generated angular.json should be increased or even removed altogether to prevent misunderstandings in the future. For me this is the better solution than disabling the source maps.

[alan-agius4]

Hi @Spielboerg,

Bundle budgets shouldn't be used for unoptimized development builds, there isn't any benefit for of doing so. And as mentioned above by @devoto13, in this case the extra size is indeed caused by the sourceMap which is expected.

The Angular CLI doesn't generate the mentioned development configuration.

Hence, this is not really actionable from our-end.

[Spielboerg]

Hi @alan-agius4,
you are right, the initially generated angular.json has no dev configuration. We have a dev config in all our projects, which is why I assumed that this was added automatically. Sorry, my bad.
I think the limits were then added to all configurations during a ng update migration. This is fine in my eyes, because after the update you have to check the configuration for automatic changes and then increase or remove the limits for dev environments if needed.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}