I have a large Angular app and need to reduce the bundle size.
I recently migrated to Angular 17 and made all of my components standalone, and started separating out which routes should be lazy loaded. The first candidate I’m trying is a page that allows the user to take a selfie for their profile.
This page component the only part of my app that uses the ngx-webcam and ngx-image-cropper libraries. I was hoping that these libraries would be removed from my main.js
file and put into corresponding Lazy chunk file instead. Unfortunately source map explorer shows that the libraries remain part of the main bundle.
How can I ensure that third party libraries are lazy loaded for the specific pages/routes that import/use them?
What I’ve tried so far:
I’ve successfully followed this guide to migrate to standalone components, so I no longer have a app.module.ts
file.
I’ve also followed this guide to have one of my page components lazily loaded. The relevant part of the router config looks like this:
{
path: 'take-selfie',
loadComponent: () =>
import('./pages/player/take-selfie/take-selfie.component')
.then(m => m.TakeSelfieComponent),
canActivate: [authGuard]
},
I’ve also confirmed that take-selfie.component
is only part of my app that makes any mention of the ngx-webcam and ngx-image-cropper libraries.
David Milne is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.