Observable.create alternative in tree-shaking

[wjljack]

I need tree-shaking like
import { zip } from 'rxjs/observable/zip';
to replace Observable.zip
but I can't find Observable.create ,when I use

import {Observable} from 'rxjs'
Observable.create()
it's import all prototypes in Observable and can't tree-shaking...
ps. I need a function to customize an Observable.

[claudiordgz]

What version are you using?

You should also be able to do import { Observable } from 'rxjs/Observable' to just bring the Observable function into your bundle, create is part of the main functions of the Observable object.

I might need to see more info on what you're using to bundle in case this doesn't fix your problem.

[benlesh]

@wjljack We're going need more information or a reproduction of your exact issue.

[wjljack]

My project use webpack and UglifyJsPlugin , when I use Observable.create, I need import whole Observable object and it's prototypes, then UglifyJsPlugin can't do tree-shaking on it. I only use create method but my dist.js include many others Observable methods,is there have a method like rxjs/observable/zip,only import 'zip' method and after tree-shaking, dist.js only contains 'zip' method and it's dependeny.thank you..

[claudiordgz]

Hi @wjljack, it's hard to know what you mean by prototypes without a reproducible example.

Here's my issue: These prototypes, are they lift, create, subscribe, pipe, toPromise? Or are they the operators like switchMap, buffer, audit, and so forth?

Did you try the following?

import { Observable } from 'rxjs/observable'
import { zip } from 'rxjs/operators/zip'

[wjljack]

yes , i use

import { Observable } from 'rxjs/observable'
....
Observable.create()

and after use UglifyJsPlugin to tree-shaking , the dist.js file is too big ,include many other Observable methods , i only need Observable.create method.

[benlesh]

Okay, re-reading your original post.

The problem is how you're importing, in RxJS 5.5, never import from rxjs, import from the direct location

RxJS 5.x

// GOOD
import { Observable } from 'rxjs/Observable';

// BAD
import { Observable } from 'rxjs';

RxJS 6.x and up (beta)

// GOOD
import { Observable } from 'rxjs';

[RoyiNamir]

@benlesh Will this : ( in v6)

import { Observable } from 'rxjs';

will import everything in rxjs\* into the bundle ?

(In 5.5 we could import only(!) import { Observable } from 'rxjs/Observable';)

[benlesh]

@RoyiNamir ... no it won't. There's no way to do that accidentally in v6.

[RoyiNamir]

@benlesh Well there is a problem though

These are my only usages :

But look how many operators are in the bundle :

/* Operator exports */
/** PURE_IMPORTS_START  PURE_IMPORTS_END */
export { audit } from '../internal/operators/audit';
export { auditTime } from '../internal/operators/auditTime';
export { buffer } from '../internal/operators/buffer';
export { bufferCount } from '../internal/operators/bufferCount';
export { bufferTime } from '../internal/operators/bufferTime';
export { bufferToggle } from '../internal/operators/bufferToggle';
export { bufferWhen } from '../internal/operators/bufferWhen';
export { catchError } from '../internal/operators/catchError';
export { combineAll } from '../internal/operators/combineAll';
export { combineLatest } from '../internal/operators/combineLatest';
export { concat } from '../internal/operators/concat';
export { concatAll } from '../internal/operators/concatAll';
export { concatMap } from '../internal/operators/concatMap';
export { concatMapTo } from '../internal/operators/concatMapTo';
export { count } from '../internal/operators/count';
export { debounce } from '../internal/operators/debounce';
export { debounceTime } from '../internal/operators/debounceTime';
export { defaultIfEmpty } from '../internal/operators/defaultIfEmpty';
export { delay } from '../internal/operators/delay';
export { delayWhen } from '../internal/operators/delayWhen';
export { dematerialize } from '../internal/operators/dematerialize';
export { distinct } from '../internal/operators/distinct';
export { distinctUntilChanged } from '../internal/operators/distinctUntilChanged';
export { distinctUntilKeyChanged } from '../internal/operators/distinctUntilKeyChanged';
export { elementAt } from '../internal/operators/elementAt';
export { every } from '../internal/operators/every';
export { exhaust } from '../internal/operators/exhaust';
export { exhaustMap } from '../internal/operators/exhaustMap';
export { expand } from '../internal/operators/expand';
export { filter } from '../internal/operators/filter';
export { finalize } from '../internal/operators/finalize';
export { find } from '../internal/operators/find';
export { findIndex } from '../internal/operators/findIndex';
export { first } from '../internal/operators/first';
export { groupBy } from '../internal/operators/groupBy';
export { ignoreElements } from '../internal/operators/ignoreElements';
export { isEmpty } from '../internal/operators/isEmpty';
export { last } from '../internal/operators/last';
export { map } from '../internal/operators/map';
export { mapTo } from '../internal/operators/mapTo';
export { materialize } from '../internal/operators/materialize';
export { max } from '../internal/operators/max';
export { merge } from '../internal/operators/merge';
export { mergeAll } from '../internal/operators/mergeAll';
export { mergeMap } from '../internal/operators/mergeMap';
export { mergeMap as flatMap } from '../internal/operators/mergeMap';
export { mergeMapTo } from '../internal/operators/mergeMapTo';
export { mergeScan } from '../internal/operators/mergeScan';
export { min } from '../internal/operators/min';
export { multicast } from '../internal/operators/multicast';
export { observeOn } from '../internal/operators/observeOn';
export { onErrorResumeNext } from '../internal/operators/onErrorResumeNext';
export { pairwise } from '../internal/operators/pairwise';
export { partition } from '../internal/operators/partition';
export { pluck } from '../internal/operators/pluck';
export { publish } from '../internal/operators/publish';
export { publishBehavior } from '../internal/operators/publishBehavior';
export { publishLast } from '../internal/operators/publishLast';
export { publishReplay } from '../internal/operators/publishReplay';
export { race } from '../internal/operators/race';
export { reduce } from '../internal/operators/reduce';
export { repeat } from '../internal/operators/repeat';
export { repeatWhen } from '../internal/operators/repeatWhen';
export { retry } from '../internal/operators/retry';
export { retryWhen } from '../internal/operators/retryWhen';
export { refCount } from '../internal/operators/refCount';
export { sample } from '../internal/operators/sample';
export { sampleTime } from '../internal/operators/sampleTime';
export { scan } from '../internal/operators/scan';
export { sequenceEqual } from '../internal/operators/sequenceEqual';
export { share } from '../internal/operators/share';
export { shareReplay } from '../internal/operators/shareReplay';
export { single } from '../internal/operators/single';
export { skip } from '../internal/operators/skip';
export { skipLast } from '../internal/operators/skipLast';
export { skipUntil } from '../internal/operators/skipUntil';
export { skipWhile } from '../internal/operators/skipWhile';
export { startWith } from '../internal/operators/startWith';
export { subscribeOn } from '../internal/operators/subscribeOn';
export { switchAll } from '../internal/operators/switchAll';
export { switchMap } from '../internal/operators/switchMap';
export { switchMapTo } from '../internal/operators/switchMapTo';
export { take } from '../internal/operators/take';
export { takeLast } from '../internal/operators/takeLast';
export { takeUntil } from '../internal/operators/takeUntil';
export { takeWhile } from '../internal/operators/takeWhile';
export { tap } from '../internal/operators/tap';
export { throttle } from '../internal/operators/throttle';
export { throttleTime } from '../internal/operators/throttleTime';
export { throwIfEmpty } from '../internal/operators/throwIfEmpty';
export { timeInterval } from '../internal/operators/timeInterval';
export { timeout } from '../internal/operators/timeout';
export { timeoutWith } from '../internal/operators/timeoutWith';
export { timestamp } from '../internal/operators/timestamp';
export { toArray } from '../internal/operators/toArray';
export { window } from '../internal/operators/window';
export { windowCount } from '../internal/operators/windowCount';
export { windowTime } from '../internal/operators/windowTime';
export { windowToggle } from '../internal/operators/windowToggle';
export { windowWhen } from '../internal/operators/windowWhen';
export { withLatestFrom } from '../internal/operators/withLatestFrom';
export { zip } from '../internal/operators/zip';
export { zipAll } from '../internal/operators/zipAll';
//# sourceMappingURL=index.js.map

Why is that ?

This is the line in package.config :

  "rxjs": "~6.1.0",

BTW - even If I import it as internal :

, And adding the path mapping section : https://gist.github.com/RoyiNamir/011587acb68aae581aa096d4f7de4c67

, I still see it in the bundle analyzer as if all modules were loaded......

Am I missing something ?