feat(@ngtools/webpack): show warning when large CSS are included in c…

[alan-agius4]

…omponents

It’s very easy to inadvertently import toplevel css in component styles. Since component css is standalone and self-contained, it will never be shared between components and remains as a single large bundle for each component. This in turn adds a large amount of code that must be processed and increases bundle size.

Related to: TOOL-949

[alan-agius4]

1. When the stylesUrl is an array should be sum of the total size of the styles or still check each file individually?
2. What should be the size limit?
3. Between dev and prod build the the size might varies quite a bit because of minifications and inline sourcemaps, how should be tackle this?

[filipesilva]

I think the answers are:

1. individual css, because the problem is usually one inadvertently very large piece of css instead of several average sized ones
2. I don't know. Maybe 20kb? Perhaps we should roll this into the bundle budgets feature, and use a default there that users can change.
3. We should use a similar logic as bundle budgets so that the reasoning is familiar.

[alan-agius4]

As suggested by yourself, let's try to use bundle budgets for this

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