javascript - 仅从 Angular 2 组件中的 rxjs 导入所需的功能

Question

我正在开发一个使用 Angular cli 引导的 Angular 2 项目。我需要第一次加载速度非常快。这就是为什么要尝试减小所有 bundle 的大小。

令我头疼的是 rxjs 库，因为它显着增加了包的大小。我正在寻找导入技巧以使树摇动起作用，进一步减小块大小。我使用了 vscode 的导入建议，它们在编码时工作，但在构建 cli 时显示未解析这些路径的错误。

这行不通

import { of } from 'rxjs/observable/of';

我不得不诉诸

import { Observable } from 'rxjs/Rx';

是否有其他方法来导入特定运算符。

Answer 1

根据您使用的 RxJs 版本，有两种方法可以实现此目的。

对于旧版本 (< 6)，您需要添加所有运算符，使用类似以下内容:

import 'rxjs/add/observable/of'

并从

导入 Observable

import { Observable } from 'rxjs/Observable';

从 rxjs/Rx 导入实际上会获取整个库，所以这就是为什么它不适合你。此外，由于旧的导入方式将修补 Observable 原型(prototype)，因此您只需要导入操作符一次。通常，人们会将它们分组到每个应用程序的一个文件中，并仅在需要的地方导入 Observable。

在新的 RxJ 中，从版本 6.0 开始，导入工作的方式进行了重构，特别是为了更轻松地进行树摇动，因此人们可以简单地导入所有内容，例如:

import { Observable } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';