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?

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?

• angular

1 Answer 1

This is a warning, which can be solved by just adding this pica to angular.json's allowedCommonJsDependencies array:

        "architect": {
            "build": {
                "options": {
                    "allowedCommonJsDependencies": [
                       "pica"
                    ],