Using several shared modules in Angular

Question

Does anyone know if there is any point in using several shared modules in Angular application?

What I'm in doubt in is that if I put all my pipes, directives and common components in one big shared module and then import it in lazy-loaded modules (where I use only one or two of the imported features) it may cause an unused-code duplicates in the output files. Then if I split shared features among several shared modules and import only those of them needed in every particular module will it reduce the size of my app? Or Angular does all such optimizations by default?

I know that webpack (on which Angular build system is based on) allows to put common chunks in one file. But I'm not sure if it works fine with lazy-loaded modules.

Answer 1

I've made some investigation on what ng build outputs in this case. I used two lazy modules (with different dependencies on the shared features) and imported my shared module to them. Then I built the application and checked their files. Them contained no extra code but only referred to the shared module placed completely in main.bundle.js.

So this means that putting shared features in one common shared module per app does not differ from splitting them between several shared modules in case of effect on the total build size.