npm run build:prod doesn't produce AOT bundles for lazy loaded modules

[KhalipskiSiarhei]

If I run npm run build:prod it produces the following JS:

So, there is not a lazy loaded JS module! But when I run the project via F5 it adds 0.js because of DebugRunWebpack target which runs JIT compilation in advance:

If I fix the mentioned above command to <Exec Command="node node_modules/webpack/bin/webpack.js --end.prod" /> lazy loaded modules stop working during build process as well.

Could you clarify why npm run build:prod doesn't produce AOT bundles for lazy loaded modules, but it is created durnig solution building? Is lazy loaded module AOT bundle in 100%?

[naveedahmed1]

In your webpack.config.js file comment the line resolve: { mainFields: ['main'] }, in serverBundleConfig

[KhalipskiSiarhei]

@naveedahmed1 Thanks, it fixed an issue. As soon as I commented the mentioned above line it started producing lazy bundles and they are AOT because there are NgFactory statements inside of the bundles. But what I am not understanding why all(!!!) bundles sizes are much bigger in comparison with JIT. As I can see in AOT we don't deliver Angular compiler but we deliver compiled code which is bigger than transpiled TS. But the differences JIT vs AOT in my bundles are 2-7 times. Is it ok or not?

[davidsekar]

@KhalipskiSiarhei
I'm guessing here.

Since angular can now reach your lazy modules, it can read all dependencies modules within lazy loaded chunks and added those to the main-server bundle... And another reason :Currently, entire source codes are inlined by inline-source-maps tools in base64 format in server. So you can expect huge size. To prevent it you have to disble generating sourcemaps for codes from node_modules folder.

Im sure you can't see the angular compiler. if you did... Then please create an issue in angular/@ngtools/webpack repo, because ngtools/webpack also powers the actual angular CLI

If you use same modules across all lazy chunks, do use commonchunksplugin which can create a async small chunks rather than pushing entire thing to main bundle. Though this method is more suitable for client bundles...

[davidsekar]

And according to current build system, ngx-bootstrap will be part of vendor bundle during development builds. But in production builds, it will be part of your code bundle to do Tree shaking ....
And I think we are importing all modules of ngx-bootstrap, so expect approx. 500kb from that...

[davidsekar]

@KhalipskiSiarhei Check out this pull request that reduces the bundle size drastically
#410 (comment)

[KhalipskiSiarhei]

@davidsekar I have applied the recommenced PR to my codebase and can confirm that it reduced bundles size up to 10 times. Thanks for your assistance with that!!!