Performance conformance compile-time checks

Feature Request

Relevant Package

@angular/compiler and @angular/compiler-cli

Description

Introduce compile-time conformance checks to guard against performance anti-patterns.

Describe the solution you’d like

The Angular compiler can perform extra checks on the user application to guard against common pitfalls. We already have the available parsing and reporting infrastructure, and there’s work happening in the direction of expanding the number of compile-time checks.

A few examples of helpful performance conformance rules are:

• Find all the unused components, directives, and pipes in the hierarchy of @NgModule and report them.
• Inline styles within component templates. They are going to break CSS inlining and also view encapsulation.
• Prevent adding fonts within component template. Rather, prefer adding fonts globally to index.html.
• Check if there’s a relative anchor without a routerLink attribute. This is often a user mistake that can cause the page to reload rather than trigger a client-side navigation

Describe alternatives you’ve considered

An alternative is to delegate these checks to linters, such as eslint or codelyzer (now deprecated). Even though this would reduce maintenance, we’d also be limited to only applications using the linting tooling and have explicitly enabled these checks.

[dgp1130]

These could be a good candidate for extended diagnostics now that it has launched. We should consider which of these checks may make sense as a diagnostic.

• Find all the unused components, directives, and pipes in the hierarchy of @NgModule and report them.

Probably difficult to implement as an extended diagnostic and IMHO very annoying when developing. I could see some folks disabling this check by default, but enabling it for CI, though even that would prevent incremental additions and could be frustrating.

• Inline styles within component templates. They are going to break CSS inlining and also view encapsulation.

Could definitely ban <style /> tags in Angular templates. Would definitely save some debugging time.

• Prevent adding fonts within component template. Rather, prefer adding fonts globally to index.html.

Would this be handled by banning <style />? Is it possible to define fonts outside of CSS? Is this some kind of <link /> tag we would want to ban?

• Check if there’s a relative anchor without a routerLink attribute. This is often a user mistake that can cause the page to reload rather than trigger a client-side navigation

This sounds like an easy win for an extended diagnostic.

[sod]

you could add to the list:

getObservable() | async // <- of course this can work, if the return value is in some form memoized, but in 99% of cases, that developer didn’t yet fully understand observables.