Angular modules partagés et webpack

Question

Nous essayons de comprendre quelle est la bonne approche pour le partage de modules dans Angular avec Webpack.

Nous avons des composants qui sont réutilisés dans divers endroits de notre application. Ils ne sont pas utilisés dans toutes les vues de l'application mais la plupart.

Nous avons créé un sharedModule qui importe et exporte les composants. Ce sharedModule est ensuite importé dans les zones nécessaires de l'application.

C'est là que nous commençons à nous demander. Si le module A importe sharedModule mais n'a besoin que de 2 des 5 composants partagés, qu'advient-il des 3 composants importés non nécessaires? Nous comprenons que Webpack est supposé faire des tremblements d'arbres et des suppressions de code, mais voulons-nous nous fier à Webpack pour le faire, ou n'utilisons-nous pas un sharedModule et importons les composants là où nous en avons besoin seulement?

Answer 1

Si vous chargez un module partagé dans app.module, il chargera tous les composants et les directives même si la page n'en a pas besoin.

Je vous suggère de diviser le module partagé, et de ne garder que les composants et les directives dont vous avez besoin dans votre application. Par exemple, si vous avez 3 composants dont vous avez besoin en seulement 3 pages, créez un module qui ne contient que les 3 et les exporte depuis ce module.

il augmentera considérablement vos performances si votre module partagé est assez gros en ce moment.

divisez autant que vous le pouvez en petits modules.