umi项目的微前端实践：基于qiankun的集成方案-优快云博客

umi项目的微前端实践：基于qiankun的集成方案

【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/umi8/umi

你是否正面临大型前端项目开发效率低下、团队协作困难、技术栈锁定等问题？微前端架构通过将应用拆分为独立部署的子应用，可有效解决这些痛点。本文将详细介绍如何在umi项目中基于qiankun实现微前端架构，让你轻松掌握从环境配置到应用部署的全流程。

微前端架构概述

微前端是一种将前端应用分解为可独立开发、测试、部署的小型应用的架构模式。采用qiankun（基于single-spa的微前端实现库）作为集成框架，具有以下优势：

技术栈无关：主应用和子应用可使用不同技术栈
独立部署：子应用更新不影响主应用
运行时隔离：避免样式和脚本冲突
共享依赖：减少重复加载公共库

环境准备

安装依赖

在主应用和子应用中分别安装qiankun依赖：

# 主应用安装
npm install qiankun --save
# 子应用无需额外安装，umi已内置支持

项目结构规划

推荐采用以下目录结构组织微前端项目：

umi-micro-frontend/
├── main-app/           # 主应用（umi项目）
│   ├── src/
│   │   ├── apps/       # 子应用注册配置
│   │   └── layouts/     # 主应用布局
├── app1/               # 子应用1（umi项目）
├── app2/               # 子应用2（umi项目）
└── package.json        # 根目录脚本

主应用配置

注册子应用

在主应用src/app.js中配置子应用注册信息：

export const qiankun = {
  apps: [
    {
      name: 'app1',
      entry: '//localhost:8001',  // 子应用开发环境地址
      container: '#subapp-container',
      activeRule: '/app1',
    },
    {
      name: 'app2',
      entry: '//localhost:8002',
      container: '#subapp-container',
      activeRule: '/app2',
    },
  ],
  lifeCycles: {
    afterMount: (props) => {
      console.log('子应用挂载完成', props);
    },
  },
};

配置路由

在主应用config/config.js中添加子应用路由：

export default {
  routes: [
    {
      path: '/',
      component: '@/layouts/index',
      routes: [
        { path: '/', component: '@/pages/index' },
        { path: '/app1', microApp: 'app1' },  // 微应用路由
        { path: '/app2', microApp: 'app2' },
      ],
    },
  ],
};

提供容器元素

在主应用布局组件中添加子应用容器：

// src/layouts/index.js
export default function Layout(props) {
  return (
    <div>
      <Header />
      <div id="subapp-container" />  {/* 子应用挂载点 */}
      <Footer />
    </div>
  );
}

子应用配置

导出生命周期函数

在子应用src/app.js中导出qiankun生命周期函数：

export const qiankun = {
  // 应用加载之前
  async bootstrap(props) {
    console.log('app1 bootstrap', props);
  },
  // 应用 render 之前触发
  async mount(props) {
    console.log('app1 mount', props);
  },
  // 应用卸载之后触发
  async unmount(props) {
    console.log('app1 unmount', props);
  },
};

配置运行时环境

修改子应用package.json，添加运行时环境配置：

{
  "name": "app1",
  "scripts": {
    "start": "umi dev --port 8001",
    "build": "umi build"
  }
}

允许跨域访问

在子应用config/config.js中配置跨域支持：

export default {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
};

应用间通信

采用props传递方式实现主应用与子应用通信：

// 主应用传递数据
export const qiankun = {
  apps: [
    {
      name: 'app1',
      entry: '//localhost:8001',
      container: '#subapp-container',
      activeRule: '/app1',
      props: {
        username: 'umi-user',
        onGlobalStateChange: (state) => {
          console.log('主应用接收子应用状态', state);
        },
      },
    },
  ],
};

子应用接收数据：

export const qiankun = {
  async mount(props) {
    console.log('子应用接收主应用数据', props.username);
    // 调用主应用方法
    props.onGlobalStateChange({ count: 1 });
  },
};

部署与优化

构建优化

# 构建主应用
cd main-app && umi build
# 构建子应用
cd app1 && umi build

生产环境配置

生产环境中，子应用entry应为实际部署地址：

// 主应用生产环境配置
export const qiankun = {
  apps: [
    {
      name: 'app1',
      entry: '/app1/index.html',  // 生产环境子应用入口
      container: '#subapp-container',
      activeRule: '/app1',
    },
  ],
};

性能优化策略

路由懒加载：通过umi的dynamic导入实现
公共依赖共享：配置externals排除公共库
预加载子应用：提高切换速度

// 预加载配置
export const qiankun = {
  apps: [...],
  prefetch: 'all',  // 预加载所有子应用
};

常见问题解决

样式隔离

qiankun默认开启样式隔离，如需关闭：

export const qiankun = {
  apps: [
    {
      name: 'app1',
      entry: '//localhost:8001',
      sandbox: { strictStyleIsolation: false },  // 关闭样式隔离
    },
  ],
};

路由冲突

主应用和子应用路由使用不同前缀，避免冲突：

主应用：/
子应用1：/app1/*
子应用2：/app2/*

应用间跳转

使用umi的history对象进行应用间跳转：

// 子应用中跳转到主应用页面
history.push('/home');
// 跳转到其他子应用
history.push('/app2/detail');

总结与展望

通过qiankun集成微前端架构到umi项目，可显著提升大型应用的开发效率和维护性。本文介绍的方案已在多个生产环境验证，适用于企业级应用架构升级。

未来微前端发展趋势：

更完善的开发体验
更好的性能优化
更丰富的生态工具

建议结合官方文档深入学习：

如有任何问题，欢迎在项目GitHub Issues交流讨论。

希望本文对你的项目架构升级有所帮助，别忘了点赞收藏，关注后续更多umi实践指南！

【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/umi8/umi

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考