微前端架构：使用不同框架构建可扩展的大型应用

引言

随着前端项目的不断膨胀，传统的单体应用架构逐渐暴露出越来越多的问题，比如开发周期长、维护困难等。为了解决这些问题，微前端架构 应运而生，它借鉴了后端微服务的思想，将大型前端应用拆分成多个小型、可独立开发和部署的模块。这种架构模式不仅可以提高开发效率，还能更好地适应快速变化的业务需求。本文将通过实战的方式，介绍如何使用流行的微前端框架Qiankun 构建一个简单的微前端应用，其中包括同时使用Vue和React作为子应用的技术栈。

微前端架构概述

微前端架构将一个大型前端应用拆分为多个独立的、可复用的小型前端应用，每个小型应用都可以独立开发、测试和部署。这种方式有助于解决大型单体应用中存在的问题，如开发效率低下、技术栈限制等。微前端架构的核心优势包括：

技术栈无关：不同的微前端可以采用不同的技术栈。
独立开发与部署：各个微前端可以由不同的团队并行开发和部署。
易于维护：由于每个部分都相对较小，因此更容易管理和维护。

然而，微前端架构也带来了一些挑战，比如如何协调各个微前端间的通信、状态管理和路由管理等。

微前端框架选择

目前市面上有许多成熟的微前端框架可供选择，其中较为流行的是Qiankun。Qiankun是一个基于Single-Spa封装的微前端框架，它提供了更加开箱即用的API，使得微前端的接入变得更加简单。此外，它还具备以下特性：

兼容多种前端技术栈：不限定接入应用的技术栈，无论是React、Vue还是Angular都可以轻松接入。
样式隔离：确保微应用之间样式不会互相干扰。
JS沙箱：确保微应用之间全局变量/事件不冲突。
资源预加载：在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
umi插件：提供了@umijs/plugin-qiankun供umi应用一键切换成微前端架构系统。

实战案例：使用Qiankun构建微前端应用

环境准备

安装Node.js环境。
使用npm或yarn初始化项目。

主应用配置

初始化项目：

bash 复制代码

mkdir main-app
cd main-app
npm init -y
npm install qiankun --save

创建主应用入口文件 （例如index.js）：

javascript 复制代码

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vue-app', // 必须与微应用注册名字相同
    entry: '//localhost:8081', // 入口路径，开发时为微应用所启本地服务，上线时为微应用线上路径
    container: '#vue-app-container', // 微应用挂载的节点
    activeRule: '/micro-vue', // 当访问路由为 /micro-vue 时加载微应用
    props: {
      msg: "我是来自主应用的值-vue" // 主应用向微应用传递参数
    }
  },
  {
    name: 'react-app',
    entry: '//localhost:8082',
    container: '#react-app-container',
    activeRule: '/micro-react',
    props: {
      msg: "我是来自主应用的值-react"
    }
  }
]);

start();

配置主应用的HTML文件：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>微前端主应用</title>
  </head>
  <body>
    <div id="vue-app-container"></div>
    <div id="react-app-container"></div>
    <script src="./index.js"></script>
  </body>
</html>

Vue子应用开发

创建Vue子应用项目：

bash 复制代码

cd ..
mkdir vue-app
cd vue-app
npx create-vue

修改Vue子应用入口文件 （例如src/main.js）：

javascript 复制代码

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

const app = createApp(App);

if (window.__POWERED_BY_QIANKUN__) {
  window.__onQiankunWindowGlobalHook__ = () => {
    app.mount('#app');
  };
} else {
  app.mount('#app');
}

配置Vue子应用的HTML文件：

html 复制代码

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: process.env.VUE_APP_MSG || 'Hello from Vue!'
    };
  }
};
</script>

启动Vue子应用服务器：
bash 复制代码
```
npm run serve
```

React子应用开发

创建React子应用项目：

bash 复制代码

cd ..
mkdir react-app
cd react-app
npx create-react-app .

修改React子应用入口文件 （例如src/index.js）：

javascript 复制代码

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

if (typeof window.__POWERED_BY_QIANKUN__ !== 'undefined') {
  ReactDOM.render(<App />, document.getElementById('root'));
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

配置React子应用的HTML文件：

jsx 复制代码

import React from 'react';

function App(props) {
  return (
    <div>
      <h1>{props.msg}</h1>
    </div>
  );
}

export default App;

启动React子应用服务器：
bash 复制代码
```
npm start
```

集成子应用

访问主应用 ：
- 打开浏览器访问http://localhost:8080，可以看到微前端子应用已经被成功加载。

测试与部署

单元测试：为每个微前端编写单元测试。
集成测试：确保各个微前端协同工作无误。
持续集成/持续部署：设置CI/CD流程以自动化测试和部署。

结论

微前端架构是一种非常有效的解决大型前端应用开发和维护难题的方法。通过使用成熟的框架如Qiankun，我们可以快速搭建起微前端应用的基础架构。这种架构模式不仅提高了开发效率，还增强了应用的可维护性和可扩展性。在未来，随着更多技术和工具的支持，微前端架构将会得到更广泛的应用。

附录

资源链接 ：Qiankun官方文档
参考资料 ：基于 qiankun 的微前端最佳实践

通过以上步骤，您可以构建一个同时使用Vue和React作为子应用技术栈的微前端应用。希望这篇实战文章能够帮助您更好地理解和掌握微前端架构的实践方法。