Angular Router Standalone APIs

Is it worth it? How much can we shake off the Routers bundle?

A couple of days ago, I came across this Tweet from Minko Gechev.

Shave off 11%; that’s neat! 😎 We have to try this!

I immediately grepped a fresh coffee and started to code a simple application with two lazy-loaded routes (/movies & /shows) that allows us to list movies and tv-shows.

GitHub - kreuzerk/providerouter

🤫 Pro tip! You can create lazy-loaded feature modules with the use of a simple single command!

Sample application that lists Movies and TV shows. (rankings are based on my own opinions 😉).

Great! We have a nice App with two routes. Each route has a service that delivers the items and some components to display them. Nothing special.

Let’s focus on the exciting part, which for this article is the bundle size.

Initial Bundle size report from the source map explorer

The whole app is 246.23 KB, 203.17 KB of it is the main bundle and 65.62 KB the router. That’s currently 26.6% of our current application. 26.6% may sound like a lot, but that's because our app is very trivial and, therefore, very small.

Okay, so that's our baseline. Let’s refactor our application to use the router's standalone APIs.

Standalone APIs