Nicholas Jamieson
1 min readFeb 15, 2018

--

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.

--

--

Nicholas Jamieson
Nicholas Jamieson

Written by Nicholas Jamieson

RxJS core team member; front-end developer; mentor; speaker; open-source contributor

No responses yet