Issue
I have a module that is dedicated to holding all the pipes for my Angular application.
An example of a module that exports just pipes.
@NgModule({
imports: [
CommonModule
],
declarations: [
FromNowPipe,
ToNowPipe,
ShortAgoPipe,
SuffixPeriodPipe
],
providers: [
FromNowPipe,
ToNowPipe,
ShortAgoPipe,
SuffixPeriodPipe
],
exports: [
FromNowPipe,
ToNowPipe,
ShortAgoPipe,
SuffixPeriodPipe
]
})
export class PipesModule {
}
I’ve been wondering if a single module that holds all my pipes will break tree shaking. Where pipes that are never used are still being added to the final bundles.
The reason I asks is that pipes are not components. So the AOT compiler might not track their usage the same way it does for components and directives.
Should I be breaking up my pipes into smaller modules and then only import modules when I know that they are needed?
Solution
The same tree-shaking mechanism happens with Pipes as any other Angular Component/Directive.
This sounds like it is more important for lazy-loading performance.
Looking at how the Ng Material manages components, is that there is one module per component.
In summary, I would suggest that you break up Pipes either into separate modules or small groups.