@角/料桶进口成本

Question

使用最新的Angular和CLI版本（〜6.1.6），以及最新的@ angular / material库（〜6.4.7），当使用从@ angular / material的主要入口点进行导入时，我发现性能下降非常明显（ public_api.ts ）：

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

如果我更新import语句以使用辅助端点：

import { MatButtonModule }  from '@angular/material/button';

我的供应商捆绑包减少了约2.6MB，页面渲染速度降低了约200ms。

具有@angular/cli的摇树能力，最终生产版本的大小与任一import语句相同。 结果，我觉得人们经常偏爱terser import语句的开发语义，而不是意识到/理解dev-time性能损失。

为什么不更多讨论第三方“桶进口”的性能损失？ 我很难找到有关这些选择的决策过程和/或性能影响的任何文档。

Answer 1

因此，当您导入桶时，webpack会将桶的所有导出添加到bundle.js中。 当您导入如下所示的特定文件时

import { MatButtonModule }  from '@angular/material/button';

将仅导入按钮文件。

但是webpack 2版本附带对ES2015模块（别名和声模块）的内置支持以及未使用的模块导出检测。 新的webpack 4版本在此功能上进行了扩展，并通过“ sideEffects” package.json属性向编译器提供了提示，以指示项目中的哪些文件是“纯”的，因此如果不使用它们可以安全地进行修剪。

有一些技巧可以消除“死代码”（捆绑包中包含但未使用的导入）

• 使用ES2015模块语法（即导入和导出）。
• 在项目的package.json文件中添加一个“ sideEffects”属性。
• 使用生产模式配置选项可启用各种优化，包括缩小和摇树 。