In the past, I used to import only specific operators with the following code:
import 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/finally';
import 'rxjs/add/observable/empty';
import 'rxjs/add/observable/throw';
This method resulted in a compact bundle (vendor.ts).
Is there a way to achieve this using RxJS without needing rxjs-compat?
Simply changing the import statement to import 'rxjs'; creates a larger bundle.
UPDATE:
I've attempted all the solutions provided but none seem to work as intended. My revised vendor.ts file looks like this:
import 'rxjs/Observable';
import 'rxjs/Subscription';
import 'rxjs/Subject';
import 'rxjs/observable/throw';
import 'rxjs/operators/map';
import 'rxjs/operators/mergeMap';
import 'rxjs/operators/catchError';
import 'rxjs/operators/finalize';
I also experimented with 'rxjs/add/operator/*'.
This is how I currently import rxjs:
import {Observable} from 'rxjs/Observable';
import {Subscription} from 'rxjs/Subscription';
import {Subject} from 'rxjs/Subject';
import {_throw} from 'rxjs/observable/throw';
import {map} from 'rxjs/operators/map';
import {mergeMap} from 'rxjs/operators/mergeMap';
import {catchError} from 'rxjs/operators/catchError';
import {finalize} from 'rxjs/operators/finalize';
I adjusted my Webpack 3 configuration based on this guide (https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-and-treeshaking) but still encountered issues.
Check out the results of the Webpack Bundle Analyzer here:
https://i.sstatic.net/LNiBD.png
The bundle appears to include all operators. I came across this relevant problem: https://github.com/angular/angular-cli/issues/9069