Make use of sass-embedded possible

[aersam]

Which @angular/* package(s) are relevant/related to the feature request?

compiler

Description

Hi there
Currently angular uses the sass package for compiling sass, which is of course fine. However it's not fast to compile sass this way, it's one of the pain parts we have in larger projects where we use things like bootstrap sass

Proposed solution

Sass-embedded is still experimental but offers the same API as sass and it's way faster. I had a project where build time went down by minutes by precompiling the sass and use the generated css in angular

I propose to add a feature flag to use sass-embedded

Alternatives considered

As mentioned I can preprocess my Sass outside Angular using sass-embedded, but it's not easy (had to create a fork of tilde-sass)

[alan-agius4]

Hi @aersamkull,

I did a number of benchmarks around using sass-embedded vs switching to dart-sass modern API and in the majority of cases sass-embedded didn't perform as well when used in the Angular CLI.

Application compilation duration	Sass API and Compiler
60852ms	dart-sass legacy sync API
50058ms	sass-embedded modern API
52666ms	dart-sass modern API

While sass-embedded did perform considerably better on large stylesheets such as style.scss, it performed poorly on smaller components stylesheets. The main reason for this is that sass-embedded starts and shutdowns the process for each compilation. More about this can be found in this issue.

Below are some timings using the Sass modern API:

File	Duration	Compiler
styles.scss	3500ms	dart-sass
styles.scss	815.489ms	sass-embedded
app.component.scss	156.726ms	dart-sass
app.component.scss	528.922ms	sass-embedded

Sass-embeed also;

• Doesn’t support all platforms, hence a fallback to dart-sass would be needed on certain platforms.
• Currently this package has a postinstall hook to download the appropriate native binary. See: Install compiler executable using optional dependencies rather than postinstall sass/embedded-host-node#145

The biggest gain will be obtained by switching to Sass modern API. Once sass/sass#3296 is address we can re-evaluate sass-embedded.

[alan-agius4]

Closing as per above.

You can track the progress on using the modern API in #23624.

[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.}