When importing retryBackoff in Angular Project, bundle size is increasing astronomically

[SplitterAlex]

Hello!

I am using backoff-rxjs in one of my angular projects and after analyzing my main bundle size I discovered my rxjs related imports are 126KB and this cannot be true. After some investigation I discovered the rxjs bundle is increasing astronomically when using the backoff-rxjs operator in my project.

I tested this behaviour on a freshly generated Angular CLI Project via ng new (CLI Version: 7.3.0). When building (ng build --prod) this simple project the rxjs related part in the main bundle is ~17KB. After importing retryBackoff and using it in the AppComponent like shown below, the rxjs related part in the main bundle is now at ~123.8KB. Mainly because wepback is packing the whole RXJS library inside the main bundle.

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs';
import { retryBackoff } from 'backoff-rxjs';

@Component({
  selector: 'app-root',
  template: `
    <div>AppComponent</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  ngOnInit() {
    of('')
      .pipe(
        retryBackoff({
          initialInterval: 200,
          maxRetries: 3
        })
      )
      .subscribe(d => console.log);
  }
}

For source map visualation I used source-map-explorer.

Before usage of retryBackoff

After usage of retryBackoff

[alex-okrushko]

Hm... Indeed looks like all of RxJS is pulled in. I'm definitely not doing it in TS files, so the issue is somewhere else.
Maybe it's angular/angular-cli#9069 ?

[alex-okrushko]

Using es2015 instead of commonjs fixes the problem. Apparently commonJS doesn't have the concept of tree-shaking.

[alex-okrushko]

Pushed 6.2.2 to npm and verified that it works as expected:

Thanks a lot for the issue report @SplitterAlex ! 👍