Angular Performance: Route Level Code Splitting
Learn about route-level code splitting and lazy loading with Angular
2 min read
2 min read
Note: this article and attached Egghead video lesson are based on the articles on web.dev/angular by Minko Gechev and Stephen Fluin. Full credit goes to them 👍
Don’t miss the other videos by subscribing to my newsletter.
TTI (Time to interactive) is an interesting metric that measures how long it takes for your app to be responsive, s.t. the user can interact. This is a good performance indicator. One way to improve TTI is to only load the minimum necessary part of our app, and then consequently “lazy load” other parts as they are needed.
In this video lesson we’re going to implement route-level code splitting and lazy loading, step by step.
Did you know you can use the following command to generate a new lazy route that will be hooked up on app.module.ts
?
$ ng g m home --route=home --module=app.module.ts
Wanna read the original web.dev article? Check it out here!.