Какой самый эффективный способ импортировать компоненты и модули в Angular? - PullRequest
Новая
       14

Какой самый эффективный способ импортировать компоненты и модули в Angular?

2 голосов
/ 19 апреля 2019

Я работал над личным Angular-проектом, используя Angular Material в качестве библиотеки компонентов. После большого исследования структуры проекта, модулей и повторно используемых компонентов у меня все еще остается несколько вопросов, на которые я не могу ответить о производительности проекта:

Возьмем, к примеру, библиотеку Angular Material: некоторые люди выступают за создание MaterialModule со всеми используемыми модулями внутри, импортируя его в AppModule, но не будет ли более производительным импортировать только несколько модулей, которые я использую внутри основных компонентов, как остальное будет использоваться только в лениво загруженных модулях?

Кроме того, с общими компонентами ... лучше ли создать что-то вроде SharedComponentsModule для объявления и экспорта их всех, или каждый компонент должен иметь свой собственный модуль?

Ответы [ 2 ]

3 голосов
/ 19 апреля 2019

некоторые люди выступают за создание MaterialModule со всеми используемыми модулями внутри

Да, это полезно для организации.С точки зрения производительности, это не имеет значения или является минимальным, благодаря WebPack

Это не то же самое, что импорт всего из Material, который может оказать гораздо большее влияние на производительность, особенно с десятками библиотек.

Так что не надо: 

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

в файле app.module.

Смысл в том, чтобы избегать файла app.module длиной в сотни или тысячи строк.Было бы больно читать для людей.

0 голосов
/ 19 апреля 2019

Ссылка: Начало работы с угловым материалом

Шаг 4: Импорт модулей компонентов углового материала

Я не уверен, какие компоненты мне потребуются, поэтому я создал модуль «обертка», который импортирует (и экспортирует) полный набор модулей компонентов Angular Material.

угловатые-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';

...
...