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.

If you are interested in MFE's Pros and Cons of have a look at this article.

Happy coding!

Stay up to date

Get notified when I publish New Games or articles, and unsubscribe at any time.

Thanks for joining!

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.

What is Vite Module Federation?

Vite Module Federation is a plugin for Vite, a modern build tool for web applications, that enables sharing of code between different applications. It allows loading remote components and dynamically rendering them as part of the local application.

How does Vite Module Federation integrate with webpack?

Vite Module Federation builds on top of webpack’s module federation feature, making it easier to use for developers who are more familiar with Vite. It allows Vite’s development server to work together with webpack’s dev server in a seamless way.

What is the best way to configure Vite Module Federation?

The best way to configure Vite Module Federation is to use the plugin’s configuration options. These options allow you to specify which modules should be shared between different applications, as well as how they should be loaded and rendered.

Can you give an example of a use case for Vite Module Federation?

One use case for Vite Module Federation is when you have multiple applications that share some common functionality, but need to be deployed separately. By using Vite Module Federation, you can create a shared library of components that can be dynamically loaded and rendered by each application.

How do I specify which remote modules to use?

You can specify which remote modules to use in your application’s configuration file. You can also specify the format of the remote module entry file, and how to handle local and remote modules that have the same name.

Can I modify remote modules?

No, you cannot modify remote modules. Instead, you can use variable injection and other techniques to customize their behavior.

What is the latest version of Vite Module Federation?

The latest version of Vite Module Federation is 1.1.9.

What is the difference between local and remote modules?

Local modules are modules that are part of your own application, while remote modules are modules that come from external sources.

What is the benefit of using Vite Module Federation?

The main benefit of using Vite Module Federation is the ability to dynamically load and render externally provided components. This allows for greater modularity and flexibility in application development.

How does Vite’s import federation work?

Vite’s import federation works by specifying the names of the remote components that should be loaded, as well as the names of the local components that will render them. This allows for greater flexibility in how components are loaded and rendered within an application.

How does Vite Module Federation work with webpack?

Vite Module Federation can work with webpack by allowing you to consume remote webpack modules and integrate them into your Vite application.

What is the difference between Vite Module Federation and webpack’s Module Federation?

Vite Module Federation is a plugin that was developed specifically for Vite, while webpack’s Module Federation is a built-in feature of webpack.

What are the benefits of using Vite Module Federation?

The benefits of using Vite Module Federation include faster build times, improved performance, and easier maintenance of large-scale applications.

How do I configure Vite Module Federation?

You can configure Vite Module Federation by adding a federation object to your vite.config.js file.

What is the `federation` object in Vite Module Federation?

The federation object is where you specify the remote modules that your application will consume, as well as any other configuration options related to Vite Module Federation.

How can I integrate Vite Module Federation into my application?

You can integrate Vite Module Federation into your application by installing the vite-plugin-federation plugin and adding it to your vite.config.js file.

Related articles

Ruslan Osipov
Author: Ruslan Osipov