Question

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

例如，以Angular Material库为例：有人主张创建一个MaterialModule，其中包含所有使用的模块，然后将其导入AppModule中，但是仅导入我在主要组件中使用的少数模块，这样做的性能就更好了，因为其余的仅在延迟加载的模块中使用？

还可以使用共享组件...创建像SharedComponentsModule这样的东西来声明并全部导出它们还是更好，还是每个组件都应该有自己的模块？

Answer 1

有些人主张创建一个MaterialModule，并在其中使用所有已使用的模块

是的，这对组织很有用。在性能方面，得益于WebPack，它不会产生任何影响或影响很小

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

所以不要：

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

在您的app.module文件中。

关键是要避免app.module文件长数百行或数千行。对于人类来说，这是一个痛苦的学习。

Answer 2

参考：Getting started with Angular Material

第4步：导入Angular Material组件模块

我不确定我需要哪些组件，所以我创建了一个“包装”模块来导入（和导出）整套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中导入组件和模块的最有效方式是什么？

2 个答案: