Skip to content

CONCEPT Cited by 1 source

Runtime code sharing

Definition

Runtime code sharing is the property that two independently built and deployed JavaScript bundles can share module code — including large libraries like React — at runtime, in the browser, without either bundle having statically linked the shared code at build time.

This is the distinguishing primitive Webpack Module Federation trades on. Before Module Federation, the two mainstream options for sharing code across independently deployed bundles were:

  1. Static linking via a shared npm package. Every bundle imports the shared library at build time and bundles its own copy. To ship a library update, every consumer must rebuild and redeploy. Version drift is an operational problem, not a runtime one.
  2. Script-tag sharing via a global (window.React). The library is loaded once via a separate <script> tag and consumers reference it via a global. Ergonomically awkward and hard to version.

Runtime code sharing lets two independently deployed bundles negotiate shared libraries when both are loaded into the same page:

  • Each bundle declares which libraries it expects to share, with a version range.
  • A federation runtime in the browser picks a compatible version and loads it once.
  • Both bundles then import from the same module instance — a single React, a single React-DOM, a single lodash.

Why this matters for micro-frontends

The load-bearing property is independent deploys without host rebuilds. A team can ship a new version of their bundle by updating its URL; the host shell picks up the change on the next page load. No host redeploy, no coordinated release, no shared-library republish.

The other property is no duplicate React problem. Two independently deployed React bundles that each carry their own React break at runtime — context, hooks, and fibers all assume a single React instance. Module Federation's shared- library resolution can enforce that only one copy loads (see concepts/shared-singleton-dependency).

Seen in

  • sources/2024-10-16-zalando-building-a-modular-portal-with-webpack-module-federation — Zalando's Logistics Portal uses runtime code sharing as the primary reason for picking Module Federation: "This ability to share code at runtime enabled us to avoid the traditional pitfalls of managing dependencies between different teams' applications. Each team could expose specific components or utilities from their micro frontend, and other teams could consume them directly, without rebuilding or redeploying shared libraries." React and React-DOM are the primary shared libraries, declared as singletons so only one copy loads across host
  • 11 remotes.
Last updated · 550 distilled / 1,221 read