Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

New StylesheetProcessor implementation is extremly slow

See original GitHub issue

Type of Issue

The new implementation of the StylesheetProcessor using workers is extremly slow

[x] Bug Report
[ ] Feature Request

Description

I have added a console.time('StylesheetProcessor') at the beginning of the StylesheetProcessor.process call and a console.timeEnd('StylesheetProcessor') before the css return statement, these are the results:

ng-packagr@11.1.4

- Compiling TypeScript sources through NGC
StylesheetProcessor: 12.902ms
StylesheetProcessor: 8.599ms
StylesheetProcessor: 8.728ms
StylesheetProcessor: 19.27ms
StylesheetProcessor: 13.624ms
StylesheetProcessor: 9.034ms
StylesheetProcessor: 10.043ms
StylesheetProcessor: 24.805ms
StylesheetProcessor: 28.633ms
StylesheetProcessor: 7.321ms
StylesheetProcessor: 44.461ms
StylesheetProcessor: 21.771ms
StylesheetProcessor: 19.549ms
StylesheetProcessor: 6.383ms
StylesheetProcessor: 13.473ms
StylesheetProcessor: 6.555ms
StylesheetProcessor: 21.906ms
StylesheetProcessor: 8.931ms
StylesheetProcessor: 8.84ms
StylesheetProcessor: 18.113ms

ng-packagr@11.2.0

- Compiling TypeScript sources through NGC
StylesheetProcessor: 1.396s
StylesheetProcessor: 1.438s
StylesheetProcessor: 1.391s
StylesheetProcessor: 1.408s
StylesheetProcessor: 1.354s
StylesheetProcessor: 1.374s
StylesheetProcessor: 1.383s
StylesheetProcessor: 1.435s
StylesheetProcessor: 1.945s
StylesheetProcessor: 2.004s
StylesheetProcessor: 1.703s
StylesheetProcessor: 1.619s
StylesheetProcessor: 1.657s
StylesheetProcessor: 1.484s
StylesheetProcessor: 1.579s
StylesheetProcessor: 1.456s
StylesheetProcessor: 1.438s
StylesheetProcessor: 1.362s
StylesheetProcessor: 1.368s
StylesheetProcessor: 1.428s

I think the problem is, that every time a file must be processed a worker is started, instead of reusing an existing one.

Version Information

@angular/*: 11.2.0
typescript: 4.1.5
rxjs: 6.3.3
node: 14.15.4
npm/yarn:  1.22.5

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:12 (8 by maintainers)

Top GitHub Comments

1reaction

alan-agius4commented, Feb 12, 2021

@skrtheboss, oh wow that’s an interesting package. Thanks for sharing let me try it out.

1reaction

skrthebosscommented, Feb 12, 2021

Hi @alan-agius4,

Yes I am in deed using windows… But i found a better solution for solving this problem and i have created a pull request. Its inspired by how its done in the babel-plugin-postcss usin the sync-rpc library.

On my machine the performance is way better now:

- Compiling TypeScript sources through NGC
StylesheetProcessor: 113.31ms
StylesheetProcessor: 114.149ms
StylesheetProcessor: 113.765ms
StylesheetProcessor: 116.981ms
StylesheetProcessor: 125.486ms
StylesheetProcessor: 112.848ms
StylesheetProcessor: 107.247ms
StylesheetProcessor: 121.265ms
StylesheetProcessor: 119.401ms
StylesheetProcessor: 110.727ms
StylesheetProcessor: 222.209ms
StylesheetProcessor: 109.632ms
StylesheetProcessor: 115.947ms
StylesheetProcessor: 108.475ms
StylesheetProcessor: 112.964ms
StylesheetProcessor: 112.828ms
StylesheetProcessor: 119.923ms
StylesheetProcessor: 98.234ms
StylesheetProcessor: 105.52ms
StylesheetProcessor: 115.459ms