With imports like this:
import { map } from "rxjs/operators";
The implementations of all operators will be included in the application unless a tree-shaking bundler is used. That’s because the operators.ts
source file is a barrel and imports and re-exports all of the operators. So it’s up to the bundler to figure out what is and isn’t actually used.
I wrote the article when RxJS 5.5 was in beta and, at that time, there were some problems with Webpack tree shaking not working. (Rollup was fine, as it has a different — and many would say better — tree shaking implementation.) These have since been resolved. (If you look at the files in the distribution’s _esm2015
and _esm5
directories, you’ll see that /*@__PURE__*/
comments are used to indicate to Webpack that exports are pure. Webpack needs this information to perform tree shaking. Rollup does not.)
So, imports like:
import { map } from "rxjs/operators/map";
could be used to import only the map
operator without relying upon tree shaking.
Something to be aware of is that in RxJS version 6 these deep imports are discouraged and, in fact, won’t work, as many files have been moved into an internal
directory and are re-exported using a barrel. In version 6, the only import locations are likely to be "rxjs"
and "rxjs/operators"
. And "rxjs/ajax"
, "rxjs/websocket"
and "rxjs/testing"
, too.