[Fixed] Will an Angular module that exports all my pipes support tree shaking?

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.

Leave a Reply

(*) Required, Your email will not be published