How EMP Simplifies Micro‑Frontend Architecture for Large Web Projects

What is EMP

EMP is a micro‑frontend architecture solution that enables developers to build production‑ready micro‑frontend systems with simplicity and efficiency.

Background

Modern web applications grow to multi‑megabyte bundles and involve dozens of developers and repositories that can reach several gigabytes. To improve collaboration, reduce build times, and manage large codebases, projects need to be split into smaller, independently maintainable units.

Advantages

Decouples a monolithic project into multiple smaller projects, allowing independent team development.

Enables rapid packaging of reusable modules without publishing to NPM; modules are consumed by configuring a remote address.

Supports dynamic updates: shared modules are hosted in a base application and automatically refreshed by consuming apps.

Reduces bundle size and accelerates builds because remote modules are not bundled locally.

Architecture Design

EMP relies on Webpack Module Federation. Each project exposes an emp.js file that defines the project name, remote modules, exposed components, and shared dependencies.

Ecosystem

EMP provides adapters for React, Vue, Angular, and Preact, and supports multiple compilers (Babel, esbuild, SWC, ESM). A dedicated Webpack plugin and UI plugins streamline integration.

Getting Started

1. Initialization

npx @efox/emp-cli init

Select a template (e.g., React TypeScript) and run:

cd my-emp && yarn && yarn dev

2. Configuration File ( emp-config.js )

React example :

module.exports = {
  webpack() {
    return {
      devServer: { port: 8002 },
    };
  },
  async moduleFederation() {
    return {
      name: 'demo',
      filename: 'emp.js',
      remotes: { '@emp/demo1': 'demo1@http://localhost:8001/emp.js' },
      exposes: {
        './components/Hello': 'src/components/Hello',
        './helper': 'src/helper',
      },
      shared: ['react', 'react-dom'],
    };
  },
};

Vue2 example (using @efox/emp-vue2 helper):

const withVue2 = require('@efox/emp-vue2');
module.exports = withVue2(({ config }) => {
  const projectName = 'vue2Project';
  const port = 8008;
  config.output.publicPath(`http://localhost:${port}/`);
  config.devServer.port(port);
  config.plugin('mf').tap(args => {
    args[0] = {
      name: projectName,
      filename: 'emp.js',
      remotes: { '@v2b': 'vue2Base@http://localhost:8009/emp.js' },
      exposes: { './Content': './src/components/Content' },
      shared: ['vue/dist/vue.esm.js'],
    };
    return args;
  });
  config.plugin('html').tap(args => {
    args[0] = { ...args[0], title: 'EMP Vue2 Project' };
    return args;
  });
  return config;
});

Upgrading Existing Projects

Upgrade a Vue2 CLI template to EMP.

Upgrade a React Create‑React‑App project to EMP.

Cross‑Framework Calls

EMP does not recommend cross‑framework calls because they increase maintenance cost and risk, but they are technically supported (e.g., Vue3 calling Vue2 components, Vue ↔ React inter‑operation).

Comparison with NPM Package Splitting

Using NPM packages requires extracting reusable code into a separate package, creating a new repository, configuring a build pipeline, and managing version updates across multiple applications. This adds overhead and can increase bundle size. EMP avoids these drawbacks by serving shared modules remotely, keeping build times short and bundle sizes small.

QA

For common issues, refer to the closed issues list on GitHub: https://github.com/efoxTeam/emp/issues?q=is%3Aissue+is%3Aclosed