Is Vite Module Federation plugin ready for real production software?

[joaopedrorc]

What do you think about using Module Federation with Vite via the @originjs/vite-plugin-federation plugin is a suitable approach for migrating a large enterprise application running on ReactJS to micro frontends? I have some reservations about using Vite in this particular scenario.

I'm seeking insights and recommendations on whether this combination of technologies would be a prudent choice for our project. Given the scale and complexity of our application, I have reservations about introducing Vite into the equation. I would greatly appreciate any expert advice or experiences from those who have worked with similar setups or have in-depth knowledge of these tools.

I've tried to deploy to Amazon an example using Webpack and got into a lot of configs as to dev and production and didn't find that much support from Vite plugin.

[ilteoood]

@gioboa

[gioboa]

I'm the creator and maintaner of this package
https://github.com/module-federation/vite
I created different examples and you can mix and match webpack and vite mfes.
Any feedbacks are welcome 🤗

[timbomckay]

@gioboa I just noticed the vue3-demo-federation-with-vite demo uses @originjs/vite-plugin-federation while the vite-vue-microfrontends example uses @module-federation/vite.

I'm assuming the @originjs example wasn't removed when the official plugin examples were added but I'm still uncertain. Any clarification would be greatly appreciated.

Thanks

[gioboa]

Both applications are working POC so that's why we have them in the repo.

[timbomckay]

The @module-federation/vite seem so much more complicated. The @originjs/vite-plugin-federation seems to align much closer to the official webpack configuration:

webpack:

module-federation-examples/basic-host-remote/app2/webpack.config.js

Lines 30 to 38 in 679e278

	new ModuleFederationPlugin({
	name: 'app2',
	library: { type: 'var', name: 'app2' },
	filename: 'remoteEntry.js',
	exposes: {
	'./Button': './src/Button',
	},
	shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
	}),

originjs:

module-federation-examples/vue3-demo-federation-with-vite/vite-side/vite.config.ts

Lines 10 to 27 in 679e278

	federation({
	name: 'vite-side',
	filename: 'remoteEntry.js',
	remotes: {
	'webpack-side': {
	external: 'http://localhost:5001/remoteEntry.js',
	format: 'esm',
	from: 'webpack',
	},
	},
	exposes: {
	'./Content': {
	name: 'content',
	import: './src/components/Content.vue',
	},
	},
	shared: ['vue', 'vuex'],
	}),

whereas @module-federation/vite requires:

module-federation-examples/vite-vue-microfrontends/remote/vite.config.ts

Lines 9 to 38 in 679e278

	export default defineConfig(async ({ command, mode }) => {
	const selfEnv = loadEnv(mode, process.cwd());
	return {
	server: {
	fs: {
	allow: [".", "../shared"],
	},
	},
	plugins: [
	{
	name: "generate-enviroment",
	options: function () {
	console.info("selfEnv", selfEnv);
	writeFileSync(
	"./src/enviroment.ts",
	`export default ${JSON.stringify(selfEnv, null, 2)};`
	);
	},
	},
	await federation({
	options: {
	workspaceRoot: __dirname,
	outputPath: "dist",
	tsConfig: "tsconfig.json",
	federationConfig: "module-federation/federation.config.cjs",
	verbose: true,
	dev: command === "serve",
	},
	adapter: createEsBuildAdapter({ plugins: [pluginVue()] }),
	}),

which then pulls in another config file from a sibling directory:

module-federation-examples/vite-vue-microfrontends/remote/module-federation/federation.config.cjs

Lines 1 to 19 in 679e278

	const {
	withNativeFederation,
	shareAll,
	} = require("@softarc/native-federation/build");
	module.exports = withNativeFederation({
	name: "remote",
	exposes: {
	"./remote-app": "./src/App.vue",
	},
	shared: {
	...shareAll({
	singleton: true,
	strictVersion: true,
	requiredVersion: "auto",
	includeSecondaries: false,
	}),
	},
	});

which requires following another package for more documentation on how to implement, and this seems to be just for the remote side when then host requires...more.

So the webpack version requires roughly 8 lines that are fairly intuitive, the originjs plugin is very similar in its approach, and @module-federation/vite doesn't provide many defaults and requires...a lot.

At least this is my understanding. If there's a simpler example out there it'd be much more welcomed. I'm not saying it's too difficult for me to grasp, but we're building templates for others to use as a base and the simpler the configuration the better.

[gioboa]

I understand your point of view, but the configurations give you the possibility to customise things

[AsuraKev]

Theres another bundler i think its worth looking out for. Rspack is a rust bundler which is pretty much like Vite but will be the first class resident when module federation 1.1 is out. I am trying out the framework Modern.js which aims to solve microfrontend with ease.

Its backward compatible with Webpack :)