微前端Micro-App的应用和分析

一、什么是微前端

1.微前端是一种将前端应用拆分为多个独立模块的开发架构，每个模块可以独立开发、部署和运行。

2.分为主应用和子应用

        每个子应用：

        1.独立开发：不同团队使用不同技术栈（如 Vue、React、Angular）。

        2.独立部署：子应用可以单独构建和发布。

        3.独立运行：子应用在运行时动态加载，互不影响。

3.核心问题-思考

        1.应用隔离：确保子应用之间的 JS、CSS 不互相干扰。

        2.通信机制：子应用之间如何共享数据和状态。

        3.性能优化：如何减少资源加载时间，提升用户体验。

        4.路由管理：如何实现主应用与子应用的路由同步。

二、PC端为例 布局

三、主应用搭建

//主应用代码
//子应用容器组件
<template>
  <!-- 动态加载子应用 -->
  <micro-app
    :name="appName"
    :url="appUrl"
    :data="appData"
    @created="handleCreated"
    @mounted="handleMounted"
    @datachange="handleDataChange"
  ></micro-app>
</template>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
// 根据路由参数动态配置子应用--一一对应
const appName = computed(() => {
  const path = route.path.split('/')[1]
  return `${path}-child` // react-child / vue-child / html-child
})
const appUrl = computed(() => {
  switch (appName.value) {
    case 'react-child':
      return 'http://localhost:3001' //启动的子应用的 地址
    case 'vue-child':
      return 'http://localhost:3002'
    case 'html-child':
      return 'http://localhost:3003'
    default:
      return ''
  }
})

四、子应用搭建

//vue.config.js
//配置跨域
module.exports = {
  devServer: {
    port: 3002,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  configureWebpack: {
    output: {
      library: 'vue-child',
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_vue-child`
    }
  }
}

五、添加通信逻辑

 if (window.microApp) {
      // 接收主应用数据
      window.microApp.addDataListener(data => {
        console.log('Vue子应用收到:', data)
      })
      
      // 发送数据到主应用
      this.$eventBus.$on('submit', (payload) => {
        window.microApp.dispatch(payload)
      })
    }

六、核心特点

1.无侵入式接入：旧系统迁移成本低，跨团队协作时无需约定技术栈规范。

2.轻量级：5KB

3.样式隔离：

默认模式：自动为子应用样式添加前缀选择器（如 [micro-app-name] .container）

例如：

严格模式：启用 Shadow DOM 实现完全隔离（ 的 shadowDOM 属性）

4.沙箱隔离：子应用对全局 API 的修改仅在沙箱内生效

七、适用场景与限制

1. 推荐使用场景

快速整合遗留系统（jQuery/AngularJS 等）

多团队独立开发不同技术栈的子应用

对主应用包体积敏感的项目（如移动端 H5）

需要频繁增减子应用的运营类系统

2. 局限性

严格沙箱模式下某些第三方库可能异常（如直接操作 DOM 的库）

子应用需支持跨域资源加载（需配置 CORS）

复杂路由同步需手动处理（如主应用与子应用嵌套路由）

新创建了前端公众号，【码农生存指南】
欢迎同行互关交流！关注后私信我返关~