微前端 - 以无界为例

---

一、微前端核心概念

微前端是一种将单体前端应用拆分为多个独立子应用的架构模式，每个子应用可独立开发、部署和运行，具备以下特点：

1. 技术栈无关性：允许主应用和子应用使用不同框架（如 React + Vue）。
2. 独立部署：子应用独立构建、测试和发布，互不影响。
3. 沙箱隔离：通过 JavaScript/CSS 沙箱避免全局污染。
4. 动态加载：按需加载子应用资源，提升性能。

---

二、无界框架核心机制

无界（Wujie） 是腾讯开源的微前端框架，核心优势：
• 基于 Web Components：天然支持样式隔离。
• Iframe 沙箱：实现 JS 执行环境的完全隔离。
• 子应用保活：切换页面时保留子应用状态，避免重复渲染。
• 通信简化：内置 props 传递和事件总线机制。

---

三、实战示例：React 主应用 + Vue 子应用

略复杂的demo

1. 主应用（React）配置

步骤说明：主应用负责路由管理和子应用容器渲染。

// 主应用：src/App.jsx
import React from 'react';
import { WujieReact } from "wujie-react";function App() {return (<div>{/* 导航菜单 */}<nav><Link to="/vue-app">Vue 子应用</Link><Link to="/react-app">React 子应用</Link></nav>{/* Vue 子应用容器 */}<WujieReactname="vueApp" url="http://localhost:3001" sync={true}props={{ user: { name: "Alice" } }}/>{/* React 子应用容器 */}<WujieReactname="reactApp"url="http://localhost:3002"sync={true}/></div>);
}export default App;

2. Vue 子应用配置

关键点：适配无界生命周期，接收主应用传递的 props。

// Vue 子应用：src/main.js
import { createApp } from 'vue';
import App from './App.vue';if (window.__POWERED_BY_WUJIE__) {// 无界环境：挂载到无界提供的容器window.__WUJIE_MOUNT = () => {const app = createApp(App);// 接收主应用传递的 propsapp.config.globalProperties.$wujieProps = window.$wujie.props;app.mount('#app');};// 子应用卸载时清理window.__WUJIE_UNMOUNT = () => {app.unmount();};
} else {// 独立运行模式createApp(App).mount('#app');
}

3. React 子应用配置

// React 子应用：src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';if (window.__POWERED_BY_WUJIE__) {// 无界环境挂载window.__WUJIE_MOUNT = () => {ReactDOM.render(<App />, document.getElementById('root'));};window.__WUJIE_UNMOUNT = () => {ReactDOM.unmountComponentAtNode(document.getElementById('root'));};
} else {// 独立运行ReactDOM.render(<App />, document.getElementById('root'));
}

---

四、跨框架通信示例

1. 主应用向子应用传递数据（Props）

// 主应用传递动态数据
<WujieReactname="vueApp"url="http://localhost:3001":props="{ user: currentUser,onUpdate: (data) => console.log('收到子应用数据:', data) }"
/>

2. Vue 子应用接收并使用 Props

<!-- Vue 子应用组件 -->
<template><div><h2>用户: {{ $wujieProps.user.name }}</h2><button @click="sendToMain">发送数据到主应用</button></div>
</template><script>
export default {methods: {sendToMain() {// 调用主应用传递的回调函数this.$wujieProps.onUpdate({ message: '来自 Vue 的数据' });}}
}
</script>

3. React 子应用与主应用通信

// React 子应用组件
import { useEffect } from 'react';export default function ReactApp() {// 接收主应用数据const user = window.$wujie?.props.user;// 向主应用发送事件const handleClick = () => {window.$wujie?.bus.emit('react-event', { time: Date.now() });};return (<div><p>主应用用户: {user?.name}</p><button onClick={handleClick}>触发事件</button></div>);
}

---

五、构建与部署配置

1. 子应用 Webpack 配置（Vue）

// vue.config.js
module.exports = {publicPath: process.env.NODE_ENV === 'production' ? 'http://cdn.com/vue-app/' : '/',devServer: {headers: {'Access-Control-Allow-Origin': '*' // 允许跨域}}
};

2. 子应用 Webpack 配置（React）

// config-overrides.js (使用 react-app-rewired)
module.exports = {webpack: (config) => {config.output.library = 'reactApp';config.output.libraryTarget = 'umd';config.output.publicPath = process.env.NODE_ENV === 'production' ? 'http://cdn.com/react-app/' : 'http://localhost:3002/';return config;},devServer: (config) => {config.headers = { 'Access-Control-Allow-Origin': '*' };return config;}
};

---

六、无界框架核心优势对比

功能	无界 (Wujie)	qiankun
隔离机制	Web Components + iframe 双重沙箱	Proxy 代理 + 样式重写
通信方式	Props + EventBus + URL 同步	全局状态管理（如 Redux）
子应用保活	✅ 支持（保留 DOM 和状态）	❌ 每次切换重新挂载

---