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';

将仅导入 button 文件。

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

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

使用ES2015模块语法（即导入和导出）。
在项目的package.json文件中添加“ sideEffects”属性。
使用production模式配置选项来启用各种优化，包括缩小和tree shaking。

@角/料桶进口成本

1 个答案: