【Vue】微前端架构与Vue（qiankun、Micro-App）

个人主页：Guiat
归属专栏：Vue

正文

1. 微前端架构概述

1.1 什么是微前端

微前端是一种前端架构模式，它将前端应用分解成一系列小型、自治的应用，可以独立开发、测试和部署。这些小型应用最终组合成一个完整的应用。微前端架构借鉴了微服务的理念，旨在解决大型前端应用开发和维护的复杂性问题。

1.2 微前端的核心价值

• 技术栈无关：每个微应用可以使用不同的技术栈
• 独立开发、部署：各团队可以独立开发、测试、部署各自的微应用
• 增量升级：可以逐步升级应用的部分功能，而不是整体重构
• 团队自治：不同团队可以独立负责各自的微应用，提高开发效率

1.3 微前端的实现方式

微前端架构有多种实现方式：

2. qiankun 框架详解

2.1 qiankun 简介

qiankun（乾坤）是蚂蚁金服推出的一个基于 single-spa 的微前端实现库，旨在让微前端的使用更加简单。其名字取自中国传统文化中的"乾坤"，寓意为包罗万象。

2.2 qiankun 的核心特性

• 基于 single-spa 封装，提供了更加开箱即用的 API
• 技术栈无关，支持多框架（React、Vue、Angular 等）
• JS 沙箱，确保子应用之间的 JavaScript 变量和环境隔离
• 样式隔离，防止子应用样式互相污染
• 预加载，提高子应用加载速度

2.3 qiankun 的基本使用

2.3.1 主应用配置

// main.js
import { registerMicroApps, start } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'vue-app',  // 子应用名称
    entry: '//localhost:8080',  // 子应用入口
    container: '#vue-app',  // 子应用挂载的DOM节点
    activeRule: '/vue-app',  // 激活规则（路由匹配）
  },
  {
    name: 'react-app',
    entry: '//localhost:3000',
    container: '#react-app',
    activeRule: '/react-app',
  }
]);

// 启动微前端服务
start();

2.3.2 子应用配置（Vue.js 为例）

// vue.config.js
const { name } = require('./package');

module.exports = {
  devServer: {
    port: 8080,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

let instance = null;

// 子应用生命周期 - 挂载前
function render(props = {}) {
  const { container } = props;
  
  instance = new Vue({
    router,
    render: h => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 导出生命周期函数
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

2.4 qiankun 通信机制

qiankun 提供了多种应用间通信方式：

2.4.1 基于 Props 的通信

// 主应用
import { registerMicroApps, start } from 'qiankun';

const sharedData = {
  user: { name: 'Zhang San' },
};

registerMicroApps([
  {
    name: 'vue-app',
    entry: '//localhost:8080',
    container: '#vue-app',
    activeRule: '/vue-app',
    props: { 
      sharedData,
      onEvent: (data) => console.log(data) 
    }
  }
]);

// 子应用
export async function mount(props) {
  console.log(props.sharedData.user.name);  // 'Zhang San'
  props.onEvent('Event from sub-app');
}

2.4.2 基于全局状态管理

// 主应用
import { registerMicroApps, start, initGlobalState } from 'qiankun';

// 初始化全局状态
const actions = initGlobalState({
  user: { name: 'Zhang San' },
  theme: 'dark',
});

// 监听全局状态变化
actions.onGlobalStateChange((state, prev) => {
  console.log('主应用观察到状态变化：', state, prev);
});

// 更新状态
actions.setGlobalState({ theme: 'light' });

// 子应用
export function mount(props) {
  // 获取全局状态并监听变化
  const { onGlobalStateChange, setGlobalState } = props;
  
  onGlobalStateChange((state, prev) => {
    console.log('子应用观察到状态变化：', state, prev);
  });
  
  // 更新状态
  setGlobalState({ user: { name: 'Li Si' } });
}

3. Micro-App 框架详解

3.1 Micro-App 简介

Micro-App 是由京东零售推出的一款基于 Web Components 的微前端框架，它使用自定义元素（Custom Elements）的方式实现微前端，简化了微前端的开发和使用。

3.2 Micro-App 的核心特性

• 基于 Web Components，使用自定义元素的方式引入子应用
• 简单易用，使用方式接近 iframe
• 技术栈无关，兼容多种框架
• 支持预加载、资源复用和沙箱隔离
• 无需改造既有应用，对子应用侵入性小

3.3 Micro-App 的基本使用

3.3.1 安装依赖

npm i @micro-zoe/micro-app --save

3.3.2 主应用配置（Vue 为例）

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import microApp from '@micro-zoe/micro-app'

// 初始化 micro-app
microApp.start()

createApp(App).mount('#app')

<!-- App.vue -->
<template>
  <div>
    <h1>主应用</h1>
    <!-- 通过自定义元素的方式引入子应用 -->
    <micro-app 
      name="vue-app" 
      url="http://localhost:8080/" 
      baseroute="/vue-app">
    </micro-app>
  </div>
</template>

3.3.3 子应用配置（Vue 为例）

对于子应用，Micro-App 框架对子应用的侵入性很小，只需在子应用的入口文件中导出相应生命周期函数即可：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

let app = null
let history = null

// 将生命周期函数挂载到 window 上
window[`micro-app-vue-app`] = {
  bootstrap() {
    console.log('vue app bootstraped')
  },
  mount(props) {
    console.log('vue app mount with props:', props)
    app = createApp(App)
    app.use(router)
    app.mount('#app')
  },
  unmount() {
    console.log('vue app unmount')
    app.unmount()
    app = null
    history = null
  }
}

3.4 Micro-App 的通信机制

3.4.1 基于 Data 属性通信

<!-- 主应用 -->
<template>
  <micro-app 
    name="vue-app" 
    url="http://localhost:8080/" 
    :data="data">
  </micro-app>
</template>

<script>
export default {
  data() {
    return {
      data: { msg: 'hello from main app' }
    }
  },
  methods: {
    changeData() {
      this.data = { msg: 'data changed' }
    }
  }
}
</script>

// 子应用中获取数据
import microApp from '@micro-zoe/micro-app'

// 获取主应用传递的数据
const data = microApp.getData()
console.log(data) // { msg: 'hello from main app' }

// 监听数据变化
window.addEventListener('datachange', (e) => {
  console.log('数据已更新：', e.detail.data)
})

3.4.2 发布订阅通信

// 主应用
import microApp from '@micro-zoe/micro-app'

// 向子应用发送数据
microApp.dispatch({ name: 'vue-app' }, { type: 'global-data', data: { value: 'hello' } })

// 监听子应用发送的数据
microApp.addDataListener('vue-app', (data) => {
  console.log('来自子应用的数据：', data)
})

// 子应用
import microApp from '@micro-zoe/micro-app'

// 向主应用发送数据
microApp.dispatch({ type: 'from-child', data: 'some data' })

// 监听主应用发送的数据
window.addEventListener('global-data', (e) => {
  console.log('来自主应用的数据：', e.detail.data)
})

4. qiankun 与 Micro-App 的对比分析

4.1 技术实现方式对比

4.2 功能特性对比

特性	qiankun	Micro-App
技术实现	基于 single-spa	基于 Web Components
使用方式	API 调用	自定义标签
子应用改造	中等	较少
沙箱隔离	JavaScript 沙箱	Shadow DOM
样式隔离	严格模式/实验性	Shadow DOM 隔离
子应用预加载	支持	支持
通信方式	Props、全局状态	Data属性、发布订阅
社区活跃度	高	中等

4.3 适用场景分析

4.3.1 qiankun 适用场景

• 大型企业级应用迁移和重构
• 需要完整微前端解决方案的项目
• 对微前端概念理解较深的团队
• 需要严格的JS隔离和更复杂的应用间通信

4.3.2 Micro-App 适用场景

• 希望快速集成微前端且对子应用侵入性低的项目
• 喜欢声明式API的开发团队
• 对现有项目改造成本敏感的场景
• Web Components技术栈项目

5. 微前端实践建议

5.1 微前端架构设计原则

• 子应用尽可能保持独立性，减少应用间耦合
• 明确应用边界和责任范围
• 统一基础设施和公共依赖管理
• 建立统一的用户体验规范

5.2 常见问题与解决方案

5.2.1 路由管理

// qiankun 主应用路由配置
import { registerMicroApps } from 'qiankun';

registerMicroApps([
  {
    name: 'vue-app',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/vue-app',
  }
]);

// 子应用路由配置
const router = new VueRouter({
  base: window.__POWERED_BY_QIANKUN__ ? '/vue-app' : '/',
  mode: 'history',
  routes: [...]
});

5.2.2 公共依赖共享

// 主应用配置共享依赖
import { registerMicroApps, start } from 'qiankun';
import Vue from 'vue';
import ElementUI from 'element-ui';

// 将共享依赖挂载到全局
window.Vue = Vue;
window.ElementUI = ElementUI;

registerMicroApps([...]);
start({
  sandbox: {
    strictStyleIsolation: false,
    experimentalStyleIsolation: true,
    // 配置不需要沙箱隔离的全局变量
    patchers: [
      (globalWindow) => {
        globalWindow.Vue = window.Vue;
        globalWindow.ElementUI = window.ElementUI;
        return globalWindow;
      }
    ]
  }
});

5.3 性能优化策略

• 使用预加载机制提前加载子应用
• 合理配置子应用打包，减小体积
• 共享公共依赖，避免重复加载
• 使用缓存策略减少资源请求

// qiankun 预加载配置
import { registerMicroApps, start, prefetchApps } from 'qiankun';

// 注册子应用
registerMicroApps([...]);

// 预加载配置
prefetchApps([
  { name: 'vue-app', entry: '//localhost:8080' },
  { name: 'react-app', entry: '//localhost:3000' }
]);

// 或在启动时配置预加载策略
start({ 
  prefetch: 'all' // 可选值: boolean | 'all' | string[] | function
});

6. 微前端的未来发展趋势

6.1 技术演进方向

• Web Components 标准的完善和普及
• ESM 模块的广泛应用
• 构建工具的进一步优化
• 微前端与微服务的深度融合

6.2 生态建设与标准化

mindmap
  root((微前端生态))
    框架层
      qiankun
      Micro-App
      single-spa
      Module Federation
    工具层
      构建工具
      开发工具
      调试工具
    规范层
      接口规范
      通信规范
      生命周期规范
    最佳实践
      设计模式
      部署策略
      监控方案

6.3 企业实践案例分析

大型企业在实施微前端架构时的常见策略：

1. 渐进式迁移：先改造部分功能模块，逐步扩展
2. 多团队协作：建立明确的团队责任边界和协作机制
3. 统一基础设施：共享组件库、设计系统、构建工具链
4. 持续集成部署：建立子应用独立的CI/CD流水线
5. 监控与治理：建立微前端专项监控和治理机制

结语
感谢您的阅读！期待您的一键三连！欢迎指正！