使用更具体的模块导入有什么好处/不同?

时间:2018-09-27 07:11:55

标签: javascript angular webpack angular-cli angular-cli-v6

例如,假设我有一个Angular 6应用,并且想从MatIconModule包中导入@angular/material

我可以做到:

import { MatIconModule } from '@angular/material/icon';

import { MatIconModule } from '@angular/material';

这对最终应用程序捆绑包或构建过程完全没有影响吗?

这个问题并不是要专门针对@angular/material软件包,而是一个有关从任何允许导入这种模块的特定和非特定模块的软件包中导入模块的普遍问题。

我觉得必须先问这个问题,但是我找不到类似的问题。

我不认为此问题完全是某些用户建议的基于观点的问题。请查看我发布的答案。

2 个答案:

答案 0 :(得分:2)

它显然基于您的编码结构,但我建议您使用

  

从“ rxjs”导入{Observable,Observer};

  

从'rxjs / Observable'导入{Observable};   从'rxjs / Observer'导入{Observer};

我猜代码看起来更离散并且对开发人员更友好。

当发生此类代码时,场景变得更加清晰。

  

import {过滤器,地图,catchError,publishReplay,refCount,从}   'rxjs / operators';

发生这种情况比较容易。

P.S:导入所有运算符会大大增加构建输出并增加构建持续时间。因此,似乎最好只导入使用中的运算符。此外,由于RxJS模块具有多义性,因此每个代码库一次导入一个运算符(或Observable的静态方法)就足够了。这些导入应该在一个集中的位置进行。

答案 1 :(得分:2)

所以我做了一些测试...

TLDR:开发包可能更大,但生产包似乎不受影响。 (尽管我的测试非常有限)。

在我的测试中,我使用了:

Node:                  10.3.0
Angular CLI:            6.0.8
Angular:                6.1.8
@angular/material:      6.4.7
webpack:                4.8.3

我使用ng new创建了一个新应用,并将素材图标模块导入了app.module.ts的2种不同方式中,然后分别运行ng build

import { MatIconModule } from '@angular/material/icon';

import { MatIconModule } from '@angular/material';

构建的结果vendor.js分别为3.9 MB6.3 MB

查看生成的代码,您可以看到一个仅导入了图标模块,而另一个则导入了整个物料组件库,即使导入仅指定了MatIconModule类。

运行ng build --prod得到的束相同。因此(至少在这个有限的示例中)对于生产版本似乎没有什么区别。我想摇树在这里正在做。但是,也许使用不同的软件包,情况可能并非如此。

在我看来,为了安全起见,最好在可能的情况下始终保持更加具体。

以下是此答案可能引起的一些其他问题。更好的答案可能是针对以下问题:

是否有任何示例在生产版本中可能真正起作用?

以这种方式构造的程序包是否有可能无法在生产版本中正确修剪?