Concrete UseCase with Angular 5

I went into a refactor from a full library import using a fluid interface on Observable to the new pipe interface hoping for a big reduction in payload size. Unfortunately that didn't come to pass. I'm recording my findings so they can be used as input to refactoring in version 6.

The main dependents using RxJs are Angular, Angular Material & NGRX/Store. The full library import came in at 860Kb, after the refactor RxJs came in at 591.75 Kb. I had expected 200 Kb. An arbitrary expectation as I don't know the code style, and the sizes are unminified.

To reason about the amount of code to expect I went through and identified imports. Our app uses

rxjs/Observable rxjs/Subject rxjs/Subscription rxjs/Subscriber rxjs/AsyncSubject rxjs/BehaviorSubject
rxjs/observable/of rxjs/observable/throw rxjs/observable/ErrorObservable
map, catchError, filter, mergeMap, switchMap, concatMap, filter, tap, timeout

Other imports are listed below.

RxJS version: 5.5.5

Project Dependencies to reproduce:

"dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^5.1.0",
    "@angular/cdk": "^5.1.1",
    "@angular/common": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/material": "^5.1.1",
    "@angular/router": "^5.1.0",
    "@ngrx/core": "~1.2.0",
    "@ngrx/effects": "~5.0.1",
    "@ngrx/store": "~5.0.0",
    "@ngrx/store-devtools": "~5.0.1",
    "@ngx-translate/core": "9.0.1",
    "ag-grid": "^15.0.0",
    "ag-grid-angular": "^15.0.0",
    "ag-grid-enterprise": "^15.0.0",
    "angular-gridster2": "^4.6.1",
    "angular-sortablejs": "^2.3.0",
    "angular2-google-map": "0.1.8",
    "angular2-material-datepicker": "^0.5.0",
    "classlist.js": "~1.1.20150312",
    "core-js": "~2.4.1",
    "ng2-charts": "^1.6.0",
    "rxjs": "^5.5.5",
    "zone.js": "^0.8.18"
  },

Expected behavior:

50% payload size reduction.

Actual behavior:

<30% payload size reduction

Library imports identified

## NgRx

rxjs/Notification
rxjs/Subject
rxjs/ReplaySubject
rxjs/operator/pluck
rxjs/operator/map
rxjs/operator/distinctUntilChanged
rxjs/observable/merge

rxjs/operator/map
rxjs/operator/materialize
rxjs/operator/ignoreElements
rxjs/operator/filter
rxjs/operator/groupBy
rxjs/operator/mergeMap
rxjs/operator/exhaustMap
rxjs/operator/dematerialize

## angular common/core

rxjs/observable/of

rxjs/operator/concatMap
rxjs/operator/filter
rxjs/operator/map
rxjs/observable/merge
rxjs/operator/share

## angular forms

rxjs/observable/forkJoin
rxjs/observable/fromPromise
rxjs/operator/map

## material components

rxjs/Subject
rxjs/Subscription

rxjs/observable/of
rxjs/observable/defer
rxjs/observable/merge
rxjs/observable/fromEvent
rxjs/observable/throw
rxjs/observable/forkJoin

rxjs/operators/startWith
rxjs/operators/filter
rxjs/operators/take
rxjs/operators/auditTime
rxjs/operators/takeUntil
rxjs/operators/debounceTime
rxjs/operators/map
rxjs/operators/catchError
rxjs/operators/tap
rxjs/operators/finalize
rxjs/operators/share

## cdk-layout (material internal sdk)

rxjs/Subject
rxjs/BehaviorSubject
rxjs/Subscription
rxjs/observable/of
rxjs/operators/tap
rxjs/observable/combineLatest
rxjs/observable/fromEvent
rxjs/observable/fromEventPattern

rxjs/operators/startWith
rxjs/operators/takeUntil
rxjs/operators/debounceTime
rxjs/operators/take
rxjs/operators/filter
rxjs/observable/merge
rxjs/operators/auditTime

ReactiveX / rxjs

Concrete UseCase with Angular 5 #3319