[Bug (Angular 13)]: Transforming @angular/ modules is slow

[FrozenPandaz]

Version

11.0.0-rc.1

Steps to reproduce

https://github.com/FrozenPandaz/nx-bugs/blob/ng13-jest/apps/app1/jest.config.js#L14

1. Clone https://github.com/FrozenPandaz/nx-bugs/
2. git checkout ng13-jest
3. jest apps/app1
4. Inspect apps/app1/jest.config.js.. There's 3 lines with different transformers for mjs files
5. The line that is uncommented is jest-preset-angular
6. Add some console.time into the transformer and analyze the timings

Expected behavior

Transforming Angular is unfortunate... but ideally.. it should be faster than it is..

Actual behavior

Here are some logs from my machine with a fast processor (Ryzen 9 3900X)

Analysis

jest-preset-angular transform is good for source code.. but for the .mjs files shipped by Angular.. we shouldn't need a full typescript compilation to transform it to be compatible with jest.

For starters, babel can be used to downlevel the modules. Unfortunately.. this doesn't actually cut down on the time that much..

To be ambitious... swc can be used... and this cuts down on the time tremendously

Timings

Using jest-preset-angular

jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/test-setup.ts: 21.372ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/core/fesm2015/testing.mjs: 477.449ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/core/fesm2015/core.mjs: 2.471s
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/compiler/fesm2015/compiler.mjs: 2.919s
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser-dynamic/fesm2015/testing.mjs: 52.341ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.mjs: 49.002ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/common/fesm2015/common.mjs: 345.398ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser/fesm2015/platform-browser.mjs: 143.068ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser/fesm2015/testing.mjs: 20.487ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/compiler/fesm2015/testing.mjs: 17.925ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/app/app.component.spec.ts: 258.679ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/app/app.component.ts: 54.289ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/app/app.component.html: 0.035ms

Using Babel

jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/test-setup.ts: 20.921ms
Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/core/fesm2015/testing.mjs: 535.916ms
Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/core/fesm2015/core.mjs: 1.699s
Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/compiler/fesm2015/compiler.mjs: 1.767s
Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser-dynamic/fesm2015/testing.mjs: 33.347ms
Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.mjs: 43.399ms
Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/common/fesm2015/common.mjs: 327.915ms
Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser/fesm2015/platform-browser.mjs: 143.358ms
Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser/fesm2015/testing.mjs: 23.802ms
Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/compiler/fesm2015/testing.mjs: 15.024ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/app/app.component.spec.ts: 370.929ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/app/app.component.ts: 58.929ms
jest-preset-angular Transform:/home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/app/app.component.html: 0.034ms

Using SWC

jest-preset-angular Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/test-setup.ts: 2.959ms
swc Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/core/fesm2015/testing.mjs: 20.864ms
swc Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/core/fesm2015/core.mjs: 183.042ms
swc Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/compiler/fesm2015/compiler.mjs: 330.156ms
swc Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser-dynamic/fesm2015/testing.mjs: 2.033ms
swc Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.mjs: 2.949ms
swc Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/common/fesm2015/common.mjs: 28.478ms
swc Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser/fesm2015/platform-browser.mjs: 13.951ms
swc Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/platform-browser/fesm2015/testing.mjs: 2.355ms
swc Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/node_modules/@angular/compiler/fesm2015/testing.mjs: 1.906ms
jest-preset-angular Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/app/app.component.spec.ts: 1.88ms
jest-preset-angular Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/app/app.component.ts: 1.634ms
jest-preset-angular Transform: /home/jason/projects/temp/nx-tests/angular/ng13-pnpm-test/apps/app1/src/app/app.component.html: 2.014ms

Additional context

Hey all, we've been testing the RC of jest-preset-angular with Angular 13 support and noticed that transforming the @angular packages is really slow.. adding around 6s just to transform Angular (for each project)

Environment

System:
    OS: Linux 5.13 Pop!_OS 21.04
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
  Binaries:
    Node: 16.5.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
  npmPackages:
    jest: 27.2.3 => 27.2.3

Suggest Solution

There's already a separate block for .mjs files... I see it does a light typescript compilation.. what about switching it over to... either babel or ambitiously... swc?

Alternatively.. is there an even cheaper typescript transpilation that we can do?

[ahnpnl]

I think in this case we can use swc for those Angular .mjs files, maybe esbuild is also another choice.

Edited: we will go with esbuild since it's already used by Angular CLI to keep consistency about dependencies.

[nartc]

@ahnpnl can you publish a new RC for this change?

[ahnpnl]

11.0.0-rc.2 is out now.

[FrozenPandaz]

Wow @ahnpnl, fantastic job! Thank you so much! 🎉

We'll test it out! 😄