source.enableAsyncEntry#

• 类型： boolean
• 默认值： false

该选项用于 webpack 模块联邦（Module Federation）场景。

开启此选项后，Modern.js 会通过 dynamic import 来包裹自动生成的入口文件（Asynchronous Boundaries），使页面代码可以消费模块联邦生成的远程模块。

背景知识#

模块联邦（Module Federation，简称 MF）是 Webpack 的一个特性。它允许 JavaScript 应用从另一个应用动态加载代码，并在此过程中共享依赖关系。如果使用联邦模块的应用缺少联邦代码所需的依赖项，Webpack 将从该联邦的构建源下载缺失的依赖项。

这使得可以创建微前端风格的应用程序，多个系统可以共享代码，并在不需要重新构建整个应用程序的情况下进行动态更新。

Modern.js 提供了一个 Module Federation 的示例项目，请参考 module-federation-examples - modernjs。

你也可以阅读 webpack Module Federation 文档 来了解更多概念。

示例#

首先，在配置文件中开启此选项：

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

然后执行 dev 或 build 命令，可以看到 Modern.js 自动生成的文件变为以下结构：

node_modules
  └─ .modern-js
     └─ main
        ├─ bootstrap.jsx  # 异步入口文件（asynchronous boundary）
        ├─ index.js      # 真正的入口代码
        └─ index.html

其中 bootstrap.js 的内容如下：

import('./index.jsx');

此时，就可以在当前页面中消费任意的远程模块了。