The most common criticism of Micro Frontends? "You're shipping 5 copies of React to the browser." 📦
If every micro-frontend bundles its own copy of core framework libraries, vendor dependencies, and utility packages, your end users pay the price in slow page loads and wasted bandwidth.
Historically, teams turned to complex bundler-specific plugins to deduplicate packages. But Native Federation handles shared dependencies through a far cleaner runtime contract.
Here is how Native Federation keeps bundle sizes lean without locking teams into rigid build steps:
- Browser-Native Import Maps 🗺️
Instead of relying on bundler magic to alias shared dependencies, Native Federation leverages web standards like Import Maps. The browser resolves shared modules (e.g., React, Angular, RxJS) dynamically at runtime. - Dynamic Version Negotiation ⚖️
Micro-frontend A requests React ^18.2.0, while micro-frontend B requests React ^18.3.0. Native Federation negotiates compatible versions on the fly, downloading the shared instance once and sharing it across independent micro-apps. - Graceful Fallback Isolation 🛡️
If team C deploys a micro-frontend requiring a major breaking version bump (React ^19), Native Federation isolates that dependency gracefully instead of breaking the entire host shell or forcing every team to upgrade simultaneously. - Zero Re-Build Lock-in 🚀
Because dependency sharing is managed at runtime, team A can update their shared utility library without triggering a mandatory rebuild or redeploy for team B.
Smart shared dependency management should improve your application's performance—not paralyze your team's deployment autonomy.