Cutting the Animations Package from the Initial Bundle

After moving our project to Angular v17, lazy-loading the animations package was one of our first optimization steps. The result: a reduction of 62.48 kB (16.51 kB gzipped) in the main bundle. All it took was a two-line change.

Here's the approach for your own project:

// ...
- import { provideAnimations } from '@angular/platform-browser/animations';
+ import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

bootstrapApplication(AppComponent, {
  providers: [
-   provideAnimations(),
+   provideAnimationsAsync(),
    // ...,

    // to disable animations
    // provideAnimationsAsync("noop"),
});
Enter fullscreen mode Exit fullscreen mode

Production build - Angular animations moved to a lazy chunk

The 1.75 MB main bundle (😱) is a story for another day 😊

Finished with the edits? Great — but don't close the tab just yet.

There are a couple of side-effects you should be aware of when deferring the animations package.

The most notable one: during the initial bootstrap, animations won't be active until the package finishes loading. Additionally, you need to be careful about import locations. If anything from @angular/animation is imported by an eagerly-loaded component, the lazy-loading behavior is effectively nullified.

For a deeper look at the side-effects, verifying that lazy-loading is actually working, and the underlying implementation details, Matthieu Riegler's excellent write-up covers it all.

Until next time 🙂

Photo by Elly Johnson on Unsplash