在 Angular 中导入组件和模块的最佳方式是什么？

Question

我一直在从事个人 Angular 项目，使用 Angular Material 作为组件库。在对项目结构、模块和可重用组件进行了大量研究之后，我仍然有几个关于项目性能的问题无法回答：

以Angular Material库为例：有些人提倡创建一个MaterialModule，里面包含所有用到的模块，导入到AppModule中，但是只导入我在里面用到的几个模块不是更高效吗主要组件，因为其余的只会在延迟加载的模块中使用？

此外，对于共享组件...是创建类似 SharedComponentsModule 的东西来声明和导出它们更好，还是每个组件都应该有自己的模块？

Answer 1

some people advocate creating a MaterialModule with all the used modules inside

是的，这对组织很有用。在性能方面，由于 WebPack

，它不会产生影响或影响很小

这与从 Material 导入所有内容不同，后者可能会对性能产生更大的影响，尤其是对于数十个库。

所以不要：

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

在您的 app.module 文件中。

重点是避免 app.module 文件有数百或数千行长。人类阅读会很痛苦。

Answer 2

参考：Getting started with Angular Material

Step 4: Import the Angular Material component modules

我不确定我需要哪些组件，所以我创建了一个 'wrapper' 模块来导入（和导出）整套 Angular Material 组件模块。

angular-material.module.ts:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';

import { LayoutModule } from '@angular/cdk/layout';

//
// Form Controls
//

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

...

在 Angular 中导入组件和模块的最佳方式是什么？

What's the most performatic way to import components and modules in Angular?

angular

architecture

angular-material2