How module federstion makes our life easier
summary
Demonstrates using Webpack 5 Module Federation with React to build a runtime-composed micro‑frontend: a shell plus two remotes (served as remote_entry.js) that lazy‑load a remote button and heading, share react and react-dom to avoid duplicate bundles, and run on separate ports so each piece deploys independently. Shows the modulefederation plugin config, use of an external template remote plugin for dynamic URLs, and tradeoffs: faster independent releases and smaller bundles versus added infra, monitoring and a single‑point‑of‑failure risk.
AI-written summary · about
chapters (9)
- 0:00Module federation intro
- 1:53Micro frontend architecture
- 7:30Webpack 5 basics
- 12:00Implementing in code
- 17:19Live demo
- 21:14Dynamic layouts with JSON
- 23:41Team independence & feature flags
- 25:29Advantages & challenges
- 28:13Q&A
related talks
31mModule Federation in Webpack 5
28mModule Federation: Theory vs Practice
01h 02mWebpack 5 Module Federation
51mBuilding a Micro-Frontend Application with Webpack 5 Module Federation
45mMicro Frontends in Action!
01h 13mThe Microfrontend Revolution, module federation, Webpack 5
25mBeyond Micro Frontends - Three Additional Things Module Federation Makes Possible
25mShipping Federated React Applications