How do i lazy load the CommonJS dependency Pica.js in my Angular application to solve the optimization bail out warning during compilation?

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 {
    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?

Read more here: Source link