@ angular /料桶进口成本

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属性向编译器提供提示，表示项目中的哪些文件是“纯粹的”，因此如果未使用则可以安全修剪。

有几个技巧可以摆脱“死代码”（包含在你的包中但未使用的导入）