ng serve: compile time 10x slower with tailwind 2.2.x

[gianmd]

🐞 Bug report

Command (mark with an x)

• serve

Is this a regression?

Problematic Angular-cli version: ^11.2.10

Previous TailwindCSS version with no problem: [email protected]

Problematic Version: [email protected]

Description

Since Angular-cli v11.2 started supporting TailwindCSS natively, we decided to upgrade our codebase to use TailwindCSS instead of custom css on the most part of our app.

We use tailwindCSS with JIT mode enabled, and we haven't had any problems until now.

Recently TailwindCSS upgraded to version 2.2.4 and bringing more features, and a New dependency tracking system for Just-in-Time mode. The latest tracking system dependency is compatible with webpack 4 and webpack 5 (using the latest postcss-loader@^4 and postcss-loader@^5), So we decided to upgrade to this version and now we are experiencing x10 compilation times.

Our application is quite large and typically experience ~5 incremental compile times with ng serve. With the new version of [email protected] this compiling times are now ~65seconds on each save.

🔬 Minimal Reproduction

Since our app is large, it is hard to replicate the problem on a new repo. I'm attaching the CPU Profiles comparing the 2 tailwindCSS versions.

CPU Profiles ZIP

CPU profile screenshots

Our test goes like this

1. Run ng serve ( node --max_old-space-size=12000 ./node_modules/@angular/cli/bin/ng serve )
2. Add a tailwind class to any div element (class="bg-red-500")
3. Save file

🌍 Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 11.2.10
Node: 14.16.1
OS: darwin x64

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1102.10
@angular-devkit/build-angular      0.1102.10
@angular-devkit/core               11.2.10
@angular-devkit/schematics         11.2.10
@angular/cdk                       11.2.10
@angular/cli                       11.2.10
@angular/fire                      6.1.4
@angular/google-maps               11.2.10
@angular/material                  11.2.10
@angular/material-moment-adapter   11.2.10
@schematics/angular                11.0.1
@schematics/update                 0.1102.10
ng-packagr                         11.0.2
rxjs                               6.6.7
typescript                         4.0.5
webpack                            4.44.2

Anything else relevant?

TailwindCSS 2.2.0 Changelog on JIT mode

[alan-agius4]

The first thing I noticed is that there are a large number of Sass compilations which take around 16.4s.

From some debugging I noticed that tailwind is adding a virtual directory

/var/folders/mp/zsgl3srd389_js72bk4_bkgh0000gn/T/tmp-40075-H4BHLbbaPPgx

This has a dependency on all the component stylesheets.

/Users/alanagius/cli-reproductions/tailwinds/src/app/app.component.scss
/Users/alanagius/cli-reproductions/tailwinds/src/app/foo/foo.component.scss
/Users/alanagius/cli-reproductions/tailwinds/src/app/foo/zar/zar.component.scss
/Users/alanagius/cli-reproductions/tailwinds/src/app/foo/bar/bar.component.scss

This directory is being invalidated with on every change which cause all components to be invalidated and recompiled.

[gianmd]

@alan-agius4 Let me know if you need something else from me

[karptonite]

Just ran into this problem myself. So in case you were wondering, it isn't just you. I'll be reverting to the older tailwindcss for now, I think.

[alan-agius4]

@karptonite, are you using Angular CLI 11 as well? If so, can you please update to the latest version and try again?

I tried to replicate this issue using the latest version of tailwindcss, webpack and Angular CLI and I am unable.

Thanks for reporting this issue. Luckily, it has already been fixed in one of the recent releases. Please update to the most recent version to resolve the problem.

[karptonite]

I am on Angular CLI 11. If this is fixed in 12, that is great, and I can give it a try once our other dependencies are updated for Angular 12. Do you happen to know if it was fixed in the CLI 11 branch later than 11.2.10?

[alan-agius4]

I am on Angular CLI 11. If this is fixed in 12, that is great, and I can give it a try once our other dependencies are updated for Angular 12. Do you happen to know if it was fixed in the CLI 11 branch later than 11.2.10?

If this is indeed fix, my assumption would be that it was fixed as part of the Webpack 5 implementation. Hence, I doubt that it was fixed in 11.2.x.

It would be great if someone can confirm that the issue is no longer present in version 12.

[gianmd]

Just tested our app with angular/[email protected] and [email protected] vs [email protected] and the issue still present.

Times on Angular v12 are faster than v11 but still considerably longer with the lower version of tailwindcss. ~3seconds vs ~30seconds between each save.

Here the cpu profiles recorded of the 2 tailwind versions with Angular 12.1.0

Angular v12.1.0 - TailwindCSS v.2.1.2

Angular v12.1.0 - TailwindCSS v.2.2.4

Recorded CPU profiles
Angular12-Tailwind- CPU Profiles.zip

Hope this helps @alan-agius4

[alan-agius4]

Hi @gianmd,

Can you try to add the below in node_modules/@ngtools/webpack/src/ivy/plugin.js Line 153 and see if it helps?

for (const changedFile of [...compiler.modifiedFiles, ...compiler.removedFiles]) {
+    if (!require('path').extname(changedFile)) {
+        continue;
+   }

    const normalizedChangedFile = paths_1.normalizePath(changedFile);
    // Invalidate file dependencies
    this.fileDependencies.delete(normalizedChangedFile);
    // Invalidate existing cache
    cache.invalidate(normalizedChangedFile);
    changedFiles.add(normalizedChangedFile);
}

[gianmd]

Hi @alan-agius4
Just tried your suggestion, unfortunately, no change in serving times.

	Test 1	Test 2
Angular CLI Version	12.11.0	12.11.0
TailwindCSS Version	2.1.2	2.2.4
Profile Screenshot
Compiling time on file change	~6s	~26s

Profiles-PluginChange.zip

[alan-agius4]

Can you try to provide a minimal reproduction?

I am having some trouble replicating this behaviour with version 12.

I’ll try to continue looking at the profiles maybe I spot something.

[gianmd]

@alan-agius4 I was able to recreate a minimal reproduction on a fresh angular project.
for the demo, I had to create multiple components using a lot of tailwind classes

You can clone the repo here https://github.com/gianmd/tailwindcss-angular12-replica

1. Clone Repo
2. npm install
3. ng serve
4. on master branch (Angular CLI 12.1.0 - TailwindCSS 2.2.4) you can add a line on any HTML template and you will see increased compiling times.

You can compare compiling times with tailwind-2.1.2 branch inside the repo. (be sure to remove node_modules and npm install again)
bigger the app, compilation times increased. on this demo, times went from ~700ms per save to ~8seconds per save

Bellow the result of the tests with this reproduction repo

	Test 1	Test 2
Branch	tailwind-2.1.2	master
Angular CLI Version	12.11.0	12.11.0
TailwindCSS Version	2.1.2	2.2.4
Profile Screenshot
Compiling time on file change	~700ms	~8s

Profiles files
profiles-reproduction-demo.zip

[alan-agius4]

@gianmd thanks for the repro, I’ll look into it, in the next couple of days.

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