Как Angular собирает модуль?

Question

Например, у нас есть модуль shared, содержащий набор входных компонентов, которые широко используются в моем приложении.

Под общим модулем у меня есть

input.component.ts checkbox.component.ts datepicker.component.ts и т. Д.

Итак, допустим, у меня есть еще один компонент page, который принадлежит его собственному модулю page, куда я хочу вставить один из компонентов выше. Для этого мне нужно импортировать весь модуль shared, верно?

Есть ли разница с точки зрения производительности, импортирую ли я весь модуль shared, в то время как мне нужен только один компонент из дюжины, или лучше иметь независимый модуль для каждого компонента низкого уровняпоэтому я могу импортировать только тот компонент, который мне нужен.

Мне интересно, как Angular справляется с этим, спасибо.

Answer 1

Привет, вы можете загрузить весь модуль, но вы указываете точный компонент, который вы используете в другом модуле, например, вам нужно сделать один файл index.ts и затем экспортировать точный компонент из общего модуля:

export * from './components/check-box/check-box.component';

Answer 2

Исходя из того, как работают большие библиотеки Angular (например, Angular Material, Angular), я думаю, что Angular включает в комплект весь код модуля. Вот почему у вас есть разные модули, которые вы импортируете, когда вам нужно, а не один большой модуль, который экспортирует все.

Так что да, с точки зрения размера пакета, было бы лучше иметь один модуль для каждого общегосоставная часть. Конечно, это излишне, на мой взгляд: мы говорим о Kb, который в большинстве приложений не имеет значения.

Лучший совет - это семантика и ваш инстинкт :Я бы сказал, просто начните с использования общего модуля со всеми общими компонентами, а затем, если вы чувствуете, что некоторые компоненты тесно связаны друг с другом (например, входные данные формы) и не используются повсеместно, создайте модуль в этой точке.