angular-architects / module-federation-plugin

MIT License
698 stars 190 forks source link

Question: Low performance with Native Federation #559

Open ips219 opened 1 month ago

ips219 commented 1 month ago

After moving from webpack to native federation I've noticed that surprisingly I've worst perfomance in local dev server with vite and esbuild than previously with webpack.

I am making some tests and trigering the rebuild with an small change takes a long time to complete.

` Changes detected. Rebuilding... { "added": [], "modified": [.......], "removed": []

No output file changes.

Application bundle generation complete. [1.258 seconds]

INFO Building federation artefacts INFO Done!

`

The bundle generation takes just 1.2 seconds, but the "Building federation artefacts" takes almost 35 seconds each time I make any change.

Considering my previous branch wich is currently working with Angular17 and webpack module federation it takes 2.4 seconds image

I guess I've some configuration wrong, but I've double checked the migration notes and the example and my angular.json is almost the same. https://github.com/angular-architects/module-federation-plugin/blob/main/libs/native-federation/migrate-appbuilder.md https://github.com/manfredsteyer/module-federation-plugin-example/blob/nf-standalone-starter/angular.json

Did anybody faced something similar?

Best regards.

ips219 commented 1 month ago

Adding some additional details, after digging in the builder...

Checking the method which is taking so long, build-for-federation:buildForFederation() it seems that most of the time is taken in the bundle-exposed-and-mappings:bundleExposedAndMappings() and bundle-shared: bundleShared().

Both of them internally call same method build-utils:bundle() which the one that takes 35/40 seconds to execute both calls.

manfredsteyer commented 1 month ago

Thanks for this info.

Is it about ng serve or ng build? Can you please share you package.json and your federation.config.js?

ips219 commented 1 month ago

Sure...

Thanks for your support...

info.zip

I've seen in the esbuild documentation that antivirus may affect the bundle process... I am not sure if this can be the source of the problem. Just in in case I will test also disabling the AV.

ips219 commented 1 month ago

After disabling the AV the performance improved a little bit but the bundle process still takes a long time to complete >20s (i added some logs).

` Application bundle generation complete. [0.740 seconds]

INFO Calling bundleExposedAndMappings: Tue May 14 2024 10:14:35 GMT+0200 INFO Called bundleExposedAndMappings Tue May 14 2024 10:14:35 GMT+0200 INFO Calling bundle with 1 entrypoints Tue May 14 2024 10:14:35 GMT+0200 INFO Calling createBuildResultMap with 0 shared Tue May 14 2024 10:14:50 GMT+0200 INFO Adding 0 exposes Tue May 14 2024 10:14:50 GMT+0200 INFO Finished bundleExposedAndMappings Tue May 14 2024 10:14:50 GMT+0200 INFO Calling describeExposed: Tue May 14 2024 10:14:50 GMT+0200 INFO Calling bundleShared: Tue May 14 2024 10:14:50 GMT+0200 INFO Called bundleShared Tue May 14 2024 10:14:50 GMT+0200 INFO Calling bundle Tue May 14 2024 10:14:51 GMT+0200 INFO Bundle finished Tue May 14 2024 10:15:01 GMT+0200 INFO Files copied Tue May 14 2024 10:15:02 GMT+0200 INFO Calling describeSharedMappings: Tue May 14 2024 10:15:02 GMT+0200 INFO Calling writeFederationInfo: Tue May 14 2024 10:15:02 GMT+0200 INFO Calling writeImportMap: Tue May 14 2024 10:15:02 GMT+0200 INFO BuildFederation completed: Tue May 14 2024 10:15:02 GMT+0200 INFO Done!

`

manfredsteyer commented 1 month ago

Thanks. I will try it out with your dependencies.

Just to make sure we are talking about the same: Do we speak about the first ng serve/ ng build or subsequent ng serve/ ng build calls?

The first time they are called, it indeed takes a bit longer because all the deps need to be compiled for federation. The result of this is cached in node_modules/.cache. After that, it should really be fast as the deps are not compiled anymore.

ips219 commented 1 month ago

I meant the subsequent calls...

I understand that the first ng serve takes longer as you said (cache generation...) but subsequent calls I expected to be lighweight.

In mfe + webpack once the dev server is running (ng serve) it takes up to 3s, now in mfe + native it is taking up to 35s to rebuild each developer change.

Best regards.