Problems with Module Federation? ImportMap to the rescue

on YouTube ↗16m

" summary

Claim that import map can replace Module Federation for sharing libs in Angular microfrontends with fewer constraints while staying bundler‑agnostic. Demo composes two Angular apps that both render Chart.js, measures main.js 234 KB vs 86 KB without Chart.js so sharing could save ~31%. Using custom webpack externals plus experiments.outputModule and externalsType yields ESM-only import map resolution, initially inflates runtime payload to 400+ KB because tree shaking is lost, then rebuilding a small wrapper library with sbilt cuts it to ~183 KB and nets ~24% savings.

AI-written summary · about

" chapters (12)

1. 0:00Micro frontends and Import Maps intro
2. 2:36Bundle savings with chart.js demo
3. 3:39Module systems and ES Modules
4. 5:45How Import Maps work
5. 6:51Webpack config for Import Maps
6. 8:57Fixing ES Module errors
7. 10:21Tree shaking limits and fixes
8. 11:03Third-party libraries abstraction
9. 12:50Import Maps features and support
10. 14:16Import Maps vs Module Federation
11. 15:43Trade-offs and architecture choice
12. 16:03Closing remarks

" related talks

• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with AngularManfred Steyer · AngularNL 2020
• 41mThe Microfrontend RevolutionManfred Steyer · angularday 2020
• 27mMicro-Frontends with Module Federation: Beyond the BasicsManfred Steyer · EnterpriseNG 2021
• 21mAngular based Micro frontends with module federationManfred Steyer · ng-conf 2022
• 33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with AngularManfred Steyer · ngVikings 2020
• 01h 02mWebpack 5 Module FederationZack Jackson · CityJS Conference 2020