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 文档 来了解更多概念。

示例

首先,在配置文件中开启此选项:

modern.config.ts
export default defineConfig({
  source: {
    enableAsyncEntry: true,
  },
});

然后执行 devbuild 命令,可以看到 Modern.js 自动生成的文件变为以下结构:

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

其中 bootstrap.js 的内容如下:

import('./index.jsx');

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

INFO

Modern.js 未对 ModuleFederationPlugin 进行封装,请通过 tools.bundlerChain 自行配置 ModuleFederationPlugin。

ON THIS PAGE