How to import only used operators in RxJS 6 like older RxJS without requiring rxjs-compat?

Question

Previously I was able to import only used operators with this 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 generates a small bundle (vendor.ts).
How to do this with RxJS without requiring rxjs-compat?
Changing the code above to import 'rxjs'; generates a bigger bundle.

UPDATE:

I followed all the answers you've posted but nothing works well. This is my updated vendor.ts:

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 tried using 'rxjs/add/operator/*'.

This is how I'm importing 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 changed my Webpack 3 configuration according to this document (https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-and-treeshaking) and nothing works.

Finally, take a look at the Webpack Bundle Analyzer result:

The bundle includes all operators. I found this related issue: https://github.com/angular/angular-cli/issues/9069

Answer 1

rxjs-compat is supposed to be installed together with rxjs, it provides the support for old-style imports.

It's possible to use RxJS 6 the same way as RxJS 5:

import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

This compatibility layer is expected to be removed in RxJS 7.

Answer 2

The issue for me was that I had module set to commonjs in tsconfig.json. It needs to be set to es6, because webpack needs es6 modules in order for it to be able to do tree shaking.

See more info in: https://webpack.js.org/guides/tree-shaking/

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export...

...

• Use ES2015 module syntax (i.e. import and export).
• Ensure no compilers transform your ES2015 module syntax into CommonJS modules