How do i lazy load the CommonJS dependency Pica.js in my Angular application to solve the...

I have added Pica.js to my angular 19 application to resize and compress images on the client side. According to the compiler pica is a CommonJS dependency and can cause optimization bailouts.

As a solution to this i've tried lazy loading pica, only fetching it when it's really necessary. This should help make the intial bundle size of the application smaller. Here's my code:

private picaInstance: any | null = null;

async getPica(): Promise<any> {
if (!this.picaInstance) {
const PicaModule = await import('pica');
const Pica = (PicaModule as { default?: any }).default || PicaModule;
this.picaInstance = Pica();
}
return this.picaInstance;
}


But despite lazy loading the pica dependency, I still get the following warning on startup:

image.service.ts depends on 'pica'. CommonJS or AMD dependencies can cause optimization bailouts.
​

How can i use Pica.js without compromising on intial bundle size?

Continue reading...