angular - 如何在@angular/material 中仅添加必要的UI 组件

Question

我正在设计一个 Angular 应用程序，我想减小应用程序的整体大小。我的应用程序依赖于 Angular Material，我在 node_modules 中找到了它有一些未使用的 UI 组件，如自动完成、复选框等，在我的应用程序中根本没有使用。我是 matInput 和其他一些 UI 组件。我想摆脱未使用的。
我的总体目标是减小应用程序的大小。
我试过的是:在 package.json 里面，我试过了

 "@angular/material/input": "^10.1.0",

而不仅仅是

 "@angular/material": "^10.1.0",

我知道这行不通，我不是 Angular 专业人士。任何关于如何删除未使用的 node_modules 以减少应用程序整体大小的建议将不胜感激。

Answer 1

在 angular 9 中，默认编译器已被 ivy 更改。 Ivy 为你做了所有的把戏。那些未导入到您的应用程序中的模块不包含在您的最终包中。
在这种情况下，如果您只使用 mat 输入模块，您仍然需要下载整个 Material 组件套件，但最终包将只引用 mat 输入。
问题的根源不是包含。尝试使用 Angular 路由器延迟加载功能，该功能仍会创建较大的应用程序大小，但会将大模块拆分为两个不同的模块，并且仅在需要时才从服务器下载。