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

微前端 - 以无界为例

news 来源：原创 2025/6/18 22:40:07

一、微前端核心概念

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

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

二、无界框架核心机制

无界（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 子应用容器 */}
      <WujieReact
        name="vueApp" 
        url="http://localhost:3001" 
        sync={true}
        props={{ user: { name: "Alice" } }}
      />

      {/* React 子应用容器 */}
      <WujieReact
        name="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);
    // 接收主应用传递的 props
    app.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）

// 主应用传递动态数据
<WujieReact
  name="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 和状态）	❌ 每次切换重新挂载