微前端qiankun改造实例分析

引言

随着前端应用的复杂性不断增加，传统的单体前端架构逐渐暴露出维护困难、团队协作效率低下等问题。微前端架构应运而生，它将前端应用拆分为多个独立的子应用，每个子应用可以独立开发、部署和运行。qiankun 是一个基于 Single-SPA 的微前端解决方案，它提供了完整的微前端开发框架，帮助开发者快速构建和集成微前端应用。

本文将通过一个实际的改造案例，分析如何使用 qiankun 将一个单体前端应用改造为微前端架构。

背景

假设我们有一个电商平台的前端应用，该应用包含了商品展示、购物车、订单管理等多个功能模块。随着业务的发展，前端代码量不断增加，开发团队也扩展到了多个小组。由于所有模块都集中在一个代码库中，导致开发、测试和部署的效率逐渐下降。为了解决这些问题，我们决定将该应用改造为微前端架构。

改造步骤

1. 确定微前端拆分方案

首先，我们需要确定如何将现有的单体应用拆分为多个子应用。根据业务功能，我们将应用拆分为以下几个子应用：

• 主应用（Main App）：负责应用的导航、用户认证等公共功能。
• 商品展示（Product App）：负责商品列表、商品详情等展示功能。
• 购物车（Cart App）：负责购物车的增删改查功能。
• 订单管理（Order App）：负责订单的创建、查询、支付等功能。

2. 创建主应用

主应用是整个微前端架构的核心，它负责加载和管理各个子应用。我们使用 qiankun 提供的 registerMicroApps 方法来注册子应用。

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'product-app',
    entry: '//localhost:7101',
    container: '#product-container',
    activeRule: '/product',
  },
  {
    name: 'cart-app',
    entry: '//localhost:7102',
    container: '#cart-container',
    activeRule: '/cart',
  },
  {
    name: 'order-app',
    entry: '//localhost:7103',
    container: '#order-container',
    activeRule: '/order',
  },
]);

start();

3. 创建子应用

每个子应用都是一个独立的前端项目，可以使用不同的技术栈进行开发。为了与主应用集成，子应用需要暴露生命周期钩子函数。

以商品展示子应用为例，我们需要在入口文件中导出 bootstrap、mount 和 unmount 方法：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

function render(props) {
  const { container } = props;
  ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log('product app bootstraped');
}

export async function mount(props) {
  console.log('product app mount', props);
  render(props);
}

export async function unmount(props) {
  console.log('product app unmount', props);
  ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root') : document.querySelector('#root'));
}

4. 配置子应用的打包工具

为了确保子应用能够被主应用正确加载，我们需要对子应用的打包工具进行配置。以 webpack 为例，我们需要修改 output 配置，确保子应用的资源路径正确。

module.exports = {
  output: {
    library: 'product-app',
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_product-app`,
  },
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
};

5. 部署与集成

在开发环境中，我们可以通过本地服务器运行各个子应用，并通过主应用进行集成。在生产环境中，我们需要将各个子应用部署到不同的服务器或 CDN 上，并确保主应用能够正确加载这些子应用。

改造后的优势

通过将单体应用改造为微前端架构，我们获得了以下优势：

1. 独立开发和部署：每个子应用可以独立开发、测试和部署，提高了开发效率。
2. 技术栈无关：不同的子应用可以使用不同的技术栈，便于团队根据需求选择合适的技术。
3. 按需加载：主应用可以根据路由动态加载子应用，减少了初始加载时间。
4. 更好的团队协作：每个子应用可以由不同的团队负责，减少了代码冲突和协作成本。

总结

微前端架构通过将前端应用拆分为多个独立的子应用，解决了单体应用在复杂业务场景下的维护和扩展问题。qiankun 成熟的微前端解决方案，提供了完整的开发框架和工具链，帮助开发者快速构建和集成微前端应用。通过本文的实例分析，我们可以看到，使用 qiankun 进行微前端改造不仅能够提升开发效率，还能带来更好的团队协作体验。

在实际项目中，微前端架构的改造需要根据具体的业务需求和团队情况进行合理的设计和规划。希望本文的实例分析能够为读者提供一些参考和启发。