当前位置：首页 > news >正文

微前端架构常见框架

news 2025/8/24 7:52:59

1. iframe

这里指的是每个微应用独立开发部署，通过 iframe 的方式将这些应用嵌入到父应用系统中，几乎所有微前端的框架最开始都考虑过 iframe，但最后都放弃，或者使用部分功能，原因主要有：

url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 frame 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器重置大小时自动居中。
全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

2. single-spa

single-spa 是一个基础的微前端框架，通俗点说，提供了生命周期的概念，并负责调度子应用的生命周期挟持 url 变化事件和函数，url 变化时匹配对应子应用，并执行生命周期流程，完整的生命周期流程为：

2.1. Root Config

index.html：静态资源、子应用入口声明。

// index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Polyglot Microfrontends</title><meta name="importmap-type" content="systemjs-importmap" /><script type="systemjs-importmap" src="https://storage.googleapis.com/polyglot_microfrontends.app/importmap.json"></script><!-- if (isLocal) { --><script type="systemjs-importmap">{"imports": {"@polyglot-mf/root-config": "/localhost:9000/polyglot-mf-root-config.js"}}</script><!-- } --><script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.2.0/dist/import-map-overrides.js"></script><script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.min.js"></script><script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/amd.min.js"></script>
</head>
<body><script>System.import('@polyglot-mf/root-config');System.import('@polyglot-mf/styleguide');</script><import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
</html>

main.js：子应用注册及启动。

// main.jsimport { registerApplication, start } from "single-spa";registerApplication({name: "@polyglot-mf/navbar",app: () => System.import("@polyglot-mf/navbar"),activeWhen: "/",
});registerApplication({name: "@polyglot-mf/clients",app: () => System.import("@polyglot-mf/clients"),activeWhen: "/clients",
});registerApplication({name: "@polyglot-mf/account-settings",app: () => loadWithoutAMD("@polyglot-mf/account-settings"),activeWhen: "/settings",
});start();// A lot of angularjs libs are compiled to UMD, and if you don't process them with webpack
// the UMD calls to window.define() can be problematic.
function loadWithoutAMD(name) {return Promise.resolve().then(() => {let globalDefine = window.define;delete window.define;return System.import(name).then((module) => {window.define = globalDefine;return module;});});
}

single-spa提倡在浏览器中直接使用微前端应用，而不是通过构建工具进行打包。在single-spa中，参考的是SystemJS的思路，从而支持在浏览器中使用import、export。其实通过构建工具也可以实现类似的功能，webpack 可以将 ES6 的模块语法转换为浏览器可以理解的格式，并进行打包和优化。

2.2. single-spa-layout

指定single-spa在index.html中哪里渲染指定的子应用，constructApplications，constructRoutes及constructLayoutEngine 是针对定义的layout中的元素获取属性，再批量注册。

<html><head><template id="single-spa-layout"><single-spa-router><nav class="topnav"><application name="@organization/nav"></application></nav><div class="main-content"><route path="settings"><application name="@organization/settings"></application></route><route path="clients"><application name="@organization/clients"></application></route></div><footer><application name="@organization/footer"></application></footer></single-spa-router></template><script>// 注册import { registerApplication, start } from 'single-spa';import {constructApplications,constructRoutes,constructLayoutEngine} from 'single-spa-layout';// 获取routesconst routes = constructRoutes(document.querySelector("#single-spa-layout"));// 获取所有的子应用const applications = constructApplications({routes,loadApp({ name }) {return System.import(name); // SystemJS 引入入口JS},});// 生成LayoutEngineconst layoutEngine = constructLayoutEngine(routes, applications);// 批量注册子应用applications.forEach(registerApplication);// 启动主应用start();</script></head></html>

2.3. 子应用注册

single-spa针对子应用不同类型的子应用（如Vue、React等）都进行封装，但核心还是bootstrap、mount、unmount生命周期钩子。

import SubApp from './index.tsx'export const bootstrap = () => {}export const mount = () => {// 使用 React 来渲染子应用的根组件ReactDOM.render(<SubApp />, document.getElementById('root'));
}export const unmount = () => {}

2.4. 样式隔离

提供子应用CSS的引入和移除：single-spa-css

// 代码块
import singleSpaCss from 'single-spa-css';const cssLifecycles = singleSpaCss({// 这里放你导出的 CSS，如果 webpackExtractedCss 为 true，可以不指定cssUrls: ["https://example.com/main.css"],// 是否要使用从 Webpack 导出的 CSS，默认为 falsewebpackExtractedCss: false,// 是否 unmount 后被移除，默认为 trueshouldUnmount: true,// 超时，不废话了，都懂的timeout: 5000
})const reactLifecycles = singleSpaReact({...})// 加入到子应用的 bootstrap 里
export const bootstrap = [cssLifecycles.bootstrap,reactLifecycles.bootstrap
]export const mount = [// 加入到子应用的 mount 里，一定要在前面，不然 mount 后会有样式闪一下的问题cssLifecycles.mount,reactLifecycles.mount
]export const unmount = [// 和 mount 同理reactLifecycles.unmount,cssLifecycles.unmount
]

子应用间CSS样式隔离，推荐使用scoped CSS和shadowDOM.

2.5. JS隔离

给每个子应用添加全局变量，加入时添加，移除是去除：single-spa-leaked-globals.

// 代码块
import singleSpaLeakedGlobals from 'single-spa-leaked-globals';// 其它 single-spa-xxx 提供的生命周期函数
const frameworkLifecycles = ...const leakedGlobalsLifecycles = singleSpaLeakedGlobals({globalVariableNames: ['$', 'jQuery', '_'], // 新添加的全局变量
})export const bootstrap = [leakedGlobalsLifecycles.bootstrap, // 放在第一位frameworkLifecycles.bootstrap,
]export const mount = [leakedGlobalsLifecycles.mount, // mount 时添加全局变量，如果之前有记录在案的，直接恢复frameworkLifecycles.mount,
]export const unmount = [leakedGlobalsLifecycles.unmount, // 删掉新添加的全局变量frameworkLifecycles.unmount,
]

查看全文

http://www.dtcms.com/a/347257.html