Sharing code at runtime

Module Federation

14 Jul 2021

Adrian Fâciu

adrianfaciu.dev

Module Federation

The problem

Some existing solutions

NPM

Micro frontend frameworks

Single build

All have (some) problems that we want to avoid

Enter

module federation

Allow us to share code from one build to another

but

Webpack (5)

esbuild

and

Webpack/esbuild

Module federation is core webpack

General overview

Terminology

Live demo

with React

React Suspense

“wait” for some code to load and specify a loading state

// Lazy-loaded
const ProfilePage =
      React.lazy(() => import('./ProfilePage')); 


// Show a spinner while the profile is loading
<Suspense fallback={<Spinner />}>
  <ProfilePage />
</Suspense>

Demo time

github.com

/adrianfaciu/

module-federation-simple

Other features

Omnidirectional host

Dependency management

new ModuleFederationPlugin({
      name: "appb",
      filename: "remoteb.js",
      exposes: {
        "./HelloFromB": "./src/HelloFromB",
      },
      shared: ["react", "react-dom"],
    }),

new ModuleFederationPlugin({
      name: "appb",
      filename: "remoteb.js",
      exposes: {
        "./HelloFromB": "./src/HelloFromB",
      },
       shared: {
         "react": { singleton: true },
         "react-dom": { singleton: true }
       },
    }),

const deps = require("./package.json").dependencies;
...
new ModuleFederationPlugin({
      name: "appb",
      filename: "remoteb.js",
      exposes: {
        "./HelloFromB": "./src/HelloFromB",
      },
      shared: {
         ...deps,
         "react": { singleton: true, 
                   requiredVersion: deps["react"] },
         "react-dom": { singleton: true,
                       requiredVersion: deps["react-dom"] }
       },
    }),