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

• Vite compares to Webpack.
• Vite Module Federation plugin
• Install vite-plugin-federation
  • Install the package
  • Update the configuration
  • Import components asynchronous
  • Use remote component
• Static import support
• Usage of Vite Module Federation package
• Module Federation For Next.js

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.

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:

• https://github.com/module-federation/nextjs-mf

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

If you are interested in [MFE's Pros and Cons of have a look at this article]("Micro frontends pros and cons").

Happy coding!