💵 Website Ad Revenue Calculator

Vite Module Federation (vite-plugin-federation) | Updated

Module Federation or Microfrontends is a relatively new pattern from the Webpack team. They created a Module federation plugin to use different separate builds as a single application.

vite module federation

Those builds should not have any dependencies on each other. That means different teams or companies can develop them and deploy them separately.

This type of application we call now "micro frontends".

Vite compares to Webpack.

Vite is a new front-end tool that helps developers run the application locally using the development server and produce optimized builds using Rollup for the production environment.

Vite was created by Evan You, the same man who gave us the Vue js framework. People may think Vite is only for the Vue js application. It is an entirely wrong assumption.

Vite was successfully used by React community as well. Here you can check the article where I compare Vite vs Webpack

Vite Module Federation plugin

The Vite ecosystem is growing up, and new plugins come often. One good news was that the Module federation concept could be used with Vite too.

Let me introduce you to the Vite plugin Federation.

The guys from Originjs created this excellent plugin so that we can develop micro frontend applications with Vite.

Please, have a look at the official repository when you are going to try it in your applications.

Install vite-plugin-federation

Install the package

The installation has no surprise. You should use your favourite package manager and install this plugin as a development dependency. This is the command if you use NPM:

npm install @originjs/vite-plugin-federation --save-dev

Update the configuration

import federation from "@originjs/vite-plugin-federation"
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    federation({
      name: 'my-module-name',
      filename: 'remoteEntry.js',
      exposes: {
        './MyButton': './src/MyButton.vue',
      },
      remotes:{
          some: 'remote_some'
      },
      shared: ['vue']
    })
  ],
})

Import components asynchronous

<script>
export default {
  name: 'App',
  components: {
    RemoteMyButtonScoped: () => import('remote-simple/remote-button-scoped'),
  }
}
</script>

Use remote component

<template>
  <div class="button-wrapper">
    <RemoteMyButtonScoped />
  </div>
</template>

As per official documentation, Federation relies on Top-level await, and you have to set "build. target" to "next" or similar value. Always check if your target browsers support top-level await.

Static import support

Vite module federation supports static import of your remote components.

If you use React:

// dynamic import
const myNewButton = React.lazy(() => import('remote/myNewButton'))

// static import
import myNewButton from 'remote/myNewButton'

If you use Vue:

// dynamic import
const myNewButton = defineAsyncComponent(() => import('remote/myNewButton'));
app.component('my-new-button' , myNewButton);
// or
export default {
  name: 'App',
  components: {
    myNewButton: () => import('remote/myNewButton'),
  }
}


// static import
import myNewButton from 'remote/myNewButton';
app.component('my-new-button' , myNewButton);
// or
export default {
  name: 'App',
  components: {
    myNewButton
  }

Usage of Vite Module Federation package

Micro frontends are becoming more popular in big companies. Teams want to develop small parts of applications and deliver changes faster and consistently.

With "originjs/vite-plugin-federation", you can easily create your micro frontend system and start deploying your micro applications. It requires some experiments and practice.

Once your dev team starts producing some output, you will notice that this modern JavaScript ecosystem is a perfect way to work for distributed frontend teams.

You might want to watch a video about mistakes or misconceptions that people make when planning micro frontends:

If you are interested in how to build the architecture for Micro frontends, read this post about pros and cons of using MFEs.

Module Federation For Next.js

Here is also interesting examples from Zack Jackson about Module Federation plugin for NextJS framework:

At the moment its only for Client side only, SSR has a PR open. Looking forward to see how SSR will be implemented.

Happy coding!

FAQs

Does Vite support module federation?

Yes, Vite supports module federation with vite-plugin-federation


What is module federation

Microfrontend or Module Federation is a pattern in front-end development where a single application can be built from different separate builds. It is analogous to a microservices approach but for client-side single-page applications written in JavaScript. It is a solution to de-composition and routing for multiple front-end applications. These different builds should not depend on each other, so they can be developed and deployed individually.


What is Webpack Module federation

Webpack Module federation is a Webpack plugin to build microfrontends.


Does Rollup has Module federation?

Yes, Rollup has a module federation plugin


Can I use Vue with module federation?

Yes, you can use Vue and module federation with Webpack or Vite bundler tool.


What is @origin/vite-plugin-federation?

@origin/vite-plugin-federation is a plugin for Vite to build microfronteds.


Does esbuild supports module federation?

No, esbuild doesn't support module federation and doesn't have plans to include it in the esbuild's core. You can use Vite with vite-plugin-federation to build the microfrontends.