#source.enableAsyncEntry

• Type: boolean
• Default: false

This option is used for webpack Module Federation scenario.

When this option is enabled, Modern.js will wrap the automatically generated entry files with dynamic import (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.

#Background

Module Federation (MF) is a technology solution that allows multiple JavaScript applications to share code and resources. Similar to microservices architecture on the server side, it allows you to split large applications into multiple independent smaller applications that can be developed, tested, and deployed independently, while dynamically loading modules from other applications at runtime.

Module Federation solves the problem of code duplication across multiple frontend applications. In the traditional approach, if multiple applications need to use the same components or utility functions, you would need to duplicate this code in each application, leading to code duplication, high maintenance costs, and larger application sizes. With Module Federation, you can place common code in one application and have other applications load it dynamically as needed, enabling code sharing and reducing duplication.

Module Federation 2.0 supports Rspack build tools, and provides enhanced features such as dynamic type hints, Manifest, Federation Runtime, runtime plugin system, and Chrome Devtools support for better development experience and debugging capabilities. You can visit the Module Federation official documentation to learn more.

Modern.js provides an example project for Module Federation. Please refer to module-federation-examples - modernjs.

#Example

First, enable this option in the configuration file:

export default defineConfig({
  source: {
    enableAsyncEntry: true,
  },
});

Then run the dev or build command, and you will see that the files automatically generated by Modern.js have the following structure:

node_modules
  └─ .modern-js
     └─ main
        ├─ bootstrap.jsx  # asynchronous entry file
        ├─ index.js      # real entry code
        └─ index.html

The contents of bootstrap.js are as follows:

import('./index.jsx');

At this point, you can consume any remote module in the current page.