从 Module Federation 到微组件，看微前端概念演进

远程模块加载

一个最简单的远程模块加载实现需要考虑什么？其实啥也不用考虑，见 codesandbox

对于 ReactDraggable 这个“远程组件”，必要的 runtime 就是 react 和 react-dom ，只要加载了 runtime 就能加载组件。

我们一般把前端项目打包产物上传 CDN ， publicPath 设为 CDN 地址，则所有静态资源都能算 “远程组件” ，运行异步js chunk必要的 runtime ( optimization.runtimeChunk ) 就是 Webpack CJS 和依赖模块的 bundle。

同时对于 ReactDraggable 这个组件，预期内它不包含任何特别的副作用，因而可以直接使用，不用考虑沙盒隔离问题。

Webpack Module Federation 思路

简单回顾下 webpack 作为一个 module bundler 打包流程就是：

• 读取入口文件
• 基于 AST 分析入口文件，产出依赖（就是递归找引用过的）文件路径
• 使用对应 loader 处理依赖文件模块，并对每个模块生成 chunkId
• 以 chunkId/处理后代码 为 key/value 把编译后的模块内容存在一个 JS 对象里，即 Webpack CJS 入参的 modules 对象。

如果把 vendor，runtime 等都配置了拆包，则业务代码的拆包文件可以清晰看到这样的对象结构。 之后 Webpack CJS runtime 的 webpack_require 就能用 chunkId 找到模块代码。再比如 webpack_require.ensure 就是 webpack 自己实现的异步模块逻辑。

基本原理

框架本身都倾向于解决从自己的角度看到的问题。webpack 作为 bundler ，它要提供的 MF 功能就是在不同的 Webpack CJS runtime 之间直接 share modules 对象内 chunk 代码的机制。

这里推荐这篇文章深入浅出一下 MF 加载机制。 MF plugin 拓展了