---

一、微前端核心概念

微前端是一種將單體前端應用拆分為多個獨立子應用的架構模式，每個子應用可獨立開發、部署和運行，具備以下特點：

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 和狀態）	? 每次切換重新掛載

---