Skip to content

Instantly share code, notes, and snippets.

@dev-sampsonorson

dev-sampsonorson/angular-lazy-loading-techniques.md

Created June 17, 2023 07:48
Show Gist options
  • Save dev-sampsonorson/565f24a6ae3414ed7651a26a5bb21b8a to your computer and use it in GitHub Desktop.
Save dev-sampsonorson/565f24a6ae3414ed7651a26a5bb21b8a to your computer and use it in GitHub Desktop.
Download ZIP
Lazy loading techniques and tips in Angular
Raw
angular-lazy-loading-techniques.md

Lazy loading techniques and tips in Angular

You can use Dynamic component loader service

  • Which respect component module, providers, context

Use "defer" strategies

  • Wrap "heavy" libraries with async conditions
  • Meaning, wrap your function that need third party libraries in a Promise or Observable and use RxJS to defer the execution. Only executed when subscribed to.

Do lazy loading on router resolver level.

  • Useful if route params specify features of the rendered view

Lazy loading is most effective with proper caching

What is not essential and could be loaded lazily, should be loaded lazily

Preload/Prefetch code that is likely to be used

Write three-shakable code

Observe your bundle size before you run into troubles

Use Bundle Wizard: https://github.com/aholachek/bundle-wizard

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment