javascript - 我应该同时使用 `import ' rxjs/Rx '` and ` import { Observable } from '@rxjs/Observable' `

Question

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Observable } from '@rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/observable/throw';
@Component({});
export shellModule{}

这是我从某处复制的来 self 的 Angular 应用程序的一段代码(我已经删除了导出模块中的定义。我正在使用它来创建调用 API 的服务。

在这个特定文件的导入中，为什么 Observable 被单独导入，即使整个 rxjs 已经被导入。如果一个特定的模块被整体导入，为什么它的一个特定对象单独导入？我试着在我提出这个问题的论坛上问这个问题，但没有答案。我想了解这是否有助于优化代码。

Answer 1

一般:

在 Typescript 中，方式 modules are handled将要求您使用 import * as rx from 'rxjs/Rx' 加载整个库，或者使用库中的特定导出模块来使用它，因此编译器加载类型.

将您的导入减少到仅您需要的特定模块，将您的应用设置为使用来自 Angular's AOT compilation 的 tree shaking .这不是由 typescript 编译器完成的，而是由 tool called rollup 完成的。 .因此，它可以稍后帮助优化代码，但它不会自动这样做。

就编译开销而言，引入整个库可能会稍微降低编译器的速度......但这不是一个非常重要的点，除非是非常复杂的库。

我个人更喜欢在特定模块中导入，因为它使调用代码更清晰一些，因为我不需要使用该全局名称来获取特定名称。 rx.Observable 与 Observable。一个很好的例子是 lodash 库(rxjs 有点复杂......)

老实说，导入整个库就像你那里的行:import 'rxjs/Rx' 对我来说没有意义。您应该只导入特定的导出模块。尝试删除它，看看你得到了什么错误，然后改用 * as rx 语法。

就 rxjs 而言 - 当您想导入特定运算符时，它有点不稳定，比如 this question does - 因此获取特定运算符的方法是:import 'rxjs/add/observable/from' - 但这也需要修改您的 webpack 设置，如中所述the referenced question's answer .