微前段框架解决方案

一、什么是微前端？

微前端（Micro Frontends） 是一种架构模式，借鉴了微服务的理念，将一个大型的前端应用拆分成多个小型、独立的子应用，每个子应用可以由不同的团队使用不同的技术栈独立开发、部署和运行。

它的核心理念是：

• 每个子应用专注于自己的业务功能；
• 主应用负责统一接入与调度；
• 子应用间尽量解耦，实现自治。

举个例子：

一个企业级后台系统可能包含：用户管理、订单管理、统计分析等多个模块，通过微前端技术可以将这些模块分别开发、部署，互不影响，提升开发效率和上线效率。

---

二、微前端解决方案有哪些？

市面上常见的微前端解决方案主要有以下几种：

方案	描述	优缺点
iframe	每个子应用独立运行在 iframe 中，天然隔离	优点：隔离性强；缺点：性能差、通信困难、SEO 差
Single-SPA	JavaScript 微前端框架，支持多个前端框架共存	优点：灵活、生态丰富；缺点：需要大量手动配置
qiankun	基于 Single-SPA，阿里开源的微前端框架	优点：开箱即用、文档齐全、支持主子应用通信、样式隔离
Module Federation (Webpack 5)	通过 Webpack 5 的模块联邦特性共享模块	优点：适合前端组件共享；缺点：配置复杂，对打包结构要求高
Web Components	基于浏览器原生组件化标准实现的微前端方式	优点：兼容性好、框架无关；缺点：灵活性不足，开发门槛较高

---

三、为什么选择 qiankun？

qiankun 是阿里团队基于 Single-SPA 封装的微前端实现框架，拥有以下优点：

优势：

1. 简单易用：封装了复杂的生命周期管理，配置较少，开箱即用。

2. 主流框架支持：兼容 Vue、React、Angular 等主流前端框架。

3. 技术栈无关：主子应用可以使用不同的技术栈。

4. 沙箱机制：通过 JS 沙箱和 CSS 隔离避免全局污染。

5. 子应用独立部署：支持子应用独立构建、发布。

6. 生命周期管理清晰：可手动或自动加载子应用，生命周期钩子完备。

7. 灵活性强：支持主应用使用 loadMicroApp 动态加载，适配场景多。

   qiankun 已于 **2019 年 6 月** 正式开源，历经六年发展，已成为一个简单且兼容多种技术栈的微前端解决方案。它支持父子应用间的样式隔离，具备良好的稳定性与可维护性。 当前最新版本为 **2.10.16**，更新时间为 **2023 年 11 月 15 日**，已被广泛应用于各类生产环境，框架本身已足够成熟。

适用场景：

• 多团队协作开发；
• 不同业务线的子系统合并；
• 系统改造、逐步迁移项目；
• 提升部署效率、缩短上线周期。

---

四、qiankun 实战

qiankun官网地址 ：https://qiankun.umijs.org/zh/guide

基本结构

主应用（Vue/React/Angular）——负责注册、加载、容器管理
├── 子应用1（Vue）
├── 子应用2（React）
└── 子应用3（Vue + Element Plus）

主应用引入qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

主应用注册子应用

import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'app-vue-ai',
    entry: 'http://localhost:8888',
    container: '#appContainer',
    activeRule: '/ai',
  },
  {
    name: 'app-react',
    entry: 'http://localhost:9000',
    container: '#appContainer',
    activeRule: '/react',
  },
])

start()

子应用配置（以 Vue2 为例）

vue.config.js(webpack) 配置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/ai/' // 生产环境下部署的子路径，对应 activeRule
    : '/',
  configureWebpack: {
    output: {
      library: 'app-vue-ai', // 必须唯一 对应主应用registerMicroApps的name
      libraryTarget: 'umd',
      chunkLoadingGlobal: 'webpackJsonp_app-vue-ai',
    }
  },
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*', //允许子应用跨域
    }
  }
}

main.js

import { createApp } from 'vue'
import App from './App.vue'

let app = createApp(App)

if (!window.__POWERED_BY_QIANKUN__) {
  app.mount('#app')
}

export async function bootstrap() {
    // bootstrap：初始化，只执行一次
}
export async function mount(props) {
    // mount：每次进入子应用时执行
  app.mount(props.container ? props.container.querySelector('#app') : '#app')
}
export async function unmount() {
    // unmount：每次离开子应用时执行
  app.unmount()
}

子应用目录下增加 public-path.js

// src/public-path.js

// 关键：设置 webpack 动态资源的路径
if (window.__POWERED_BY_QIANKUN__) {
  // __webpack_public_path__ 是 webpack 内置变量
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

基础乾坤完成搭建，，，，