RxJS 是一个流行的 JavaScript 库，被广泛用于异步编程。它提供了大量的操作符来处理数据流，但有时我们只需要使用其中的一部分操作符，而不想把整个 RxJS 库引入项目中。这时就可以使用操作符的 tree shaking 技术来仅引入需要的操作符。
什么是 tree shaking？
tree shaking 是一种优化技术，它可以在编译阶段去掉代码中未被引用的部分，从而减小生成的代码体积。在前端开发中，tree shaking 一般用于优化 JavaScript 库的引入，以减少不必要的代码执行和网络传输。
RxJS 中的 tree shaking
RxJS 提供了一个特殊的预构建版本，这个版本仅包含被最广泛使用的操作符。我们可以使用这个预构建版本，并且通过配置工具来仅引入需要的操作符。
使用预构建版本
首先，我们需要安装预构建版本：
npm install rxjs@7.4.0-compat
然后，在代码中只引入需要的操作符，以避免引入整个 RxJS 库。例如，我们只需要使用 filter 和 map 操作符：
-- -------------------- ---- -------
------ - ---- - ---- -------
------ - ------- --- - ---- -----------------
-------- -- ---
------
-------- -- - - - --- ---
----- -- - - --
-
------------------------在上面的代码中，我们仅引入了 filter 和 map 两个操作符，并且使用了 pipe 方法来将它们串联起来。这样，仅包含这两个操作符的版本就足够用了。
配置工具
如果你使用的是 Webpack 或者 Rollup，那么还有一种更灵活的方式来进行 tree shaking。它可以让你使用任何操作符，而无需手动选取预构建版本。
在 Webpack 中，你可以使用 babel-plugin-import-rewrite：
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -----
--
------- -
------ -
-
----- ----------
---- -
------- ---------------
-------- -
-------- -
------------------ -
------ -
- ------ ------------------- ------------ ---------------------------- --
--
---
--
--
--
--
--
--
-在上面的代码中，我们使用了 babel-plugin-import-rewrite 来替换所有 rxjs/operators 的导入。这个插件将所有被导入的操作符替换成从预构建版本中导入的相应操作符。
在 Rollup 中，你可以使用 rollup-plugin-rxjs-treeshake：
-- -------------------- ---- -------
------ - ------ - ---- -----------------------
------ ------------- ---- -------------------------------
------ ------- -
------ ---------------
-------- -
---------------
----------- -----------------
-------- ---------- -------
---
---------
--
-- ---
--在上面的代码中，我们使用了 rollup-plugin-rxjs-treeshake 来从 RxJS 中仅引入需要的操作符。
总结
在 RxJS 中，tree shaking 可以帮助我们引入项目所需要的最小部分代码。这样可以减小项目的体积，加快代码加载速度，同时避免了因不必要的代码导入而引起的性能问题。使用预构建版本或者配置工具，你可以轻松地进行 tree shaking，并在 RxJS 中优化你的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647afffe968c7c53b0693e45