loading...
Cover image for Angular Performance: Route Level Code Splitting
Angular

Angular Performance: Route Level Code Splitting

juristr profile image Juri Strumpflohner Updated on ・2 min read

This post has originally been published on https://juristr.com/blog/2019/08/ngperf-route-level-code-splitting. Go to juristr.com/blog for more content


This article is part of my "Angular Performance Week" series, where I publish a new video each day based on the performance articles on web.dev/angular. Today we're taking a look at route-level code splitting to increase the TTI of our application.

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 👍

Angular Performance Series

  1. Route Level Code Splitting
  2. Preload Lazy Routes in Angular
  3. Performance budgets with the Angular CLI
  4. Optimize Angular's Change Detection
  5. Virtual Scrolling for large lists with the CDK
  6. Precaching with the Angular Service Worker

Don't miss the other videos by subscribing to my newsletter.

Route Level Code Splitting

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.

Bonus: Showing a loading indicator for lazy routes

Original web.dev article

Wanna read the original web.dev article? Check it out here!.

Posted on by:

juristr profile

Juri Strumpflohner

@juristr

Architect 👨‍💻 @nrwl_io 🐳🦄 • Google Dev Expert #GDE •🎓 @eggheadio • ❤ JS, Angular • 📝 blogger • 🗣️ speaker • @cypress_io Ambassador • nx.app • nx.dev

Angular

This is where we write about all things Angular. It's meant to be a place for Angular community and people interested in Angular and the Angular ecosystem.

Discussion

pic
Editor guide