Ionic-app-scripts: All lettable Rxjs operators included in vendors.js

[peterpeterparker]

Short description of the problem:

With the introduction of Rxjs 5.5.2 and the lettable operators, only the used operators should be included into vendor.js.

Analyzing the source-map resulting of ionic serve I noticed that it isn't the case. Since my app bundle size didn't decrease, I may be wrong, but I've the feeling that all operators are also included while building with --prod.

I could reproduce this behavior with a minimal repo.

What behavior are you expecting?

A smaller bundle vendor.js respectively a bundle which only contains the operators I use.

Steps to reproduce:

1. git clone https://github.com/peterpeterparker/ionic-rxjs
2. ionic serve
3. cd www/build
4. source-map-explorer vendor.js vendor.js.map

Which @ionic/app-scripts version are you using?

"3.1.0"

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.17.0
ionic (Ionic CLI) : 3.17.0

local packages:

@ionic/app-scripts : 3.1.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.8.1
npm  : 5.5.1 
OS   : macOS Sierra

Misc:

backend : pro

Screenshots

[mhartington]

So that is because of the import you did. You pulled from rxjs/operators, which will pull in all of the operators. Instead, you can use deep imports to pull the single operator you need. See this gist

https://gist.github.com/mhartington/a6b2c0efbe0b86c4265e4c162f955676

[peterpeterparker]

@mhartington you are absolutely totally correct, sorry for the wrong issue

Screenshot afterwards: 400kb saved

[peterpeterparker]

For the record

Bad:

import { debounceTime } from 'rxjs/operators';

Good:

import { debounceTime } from 'rxjs/operators/debounceTime';

[mburger81]

Yes but I think it is not as described by Mike in the issue, but his gist post is right!
rxjs/operators is ok
rxjs/add/operator/ is old and not NOT ok

But on ionic you have to do a deepimport like this
import {a} from rxjs/operatora/a
import {b} from rxjs/operatora/b

But teoretically webpack can do also
import {a, b} from rxja/operators
with the same result but I think this is no supported for now in app-script