micro-app-demo 微前端

micro-app-demo（微前端）是一种前端架构模式，旨在将一个大型的Web应用程序分解为多个小型应用程序，每个应用程序可以独立开发、测试、部署和运行。每个小型应用程序被称为微应用程序，它们可以通过Web组件、Web框架或自定义解决方案实现，并可以独立部署和更新。

通过微前端，可以提高Web应用程序的可维护性、可扩展性和性能，并且可以大大减少开发人员之间的协作成本。微前端也有利于在掌握一些基本技能后，将一个大型团队分解成若干个小型团队，分别负责不同的微应用程序的开发和维护。

微前端还有助于减轻前端应用程序对特定框架或库的依赖，增强了应用程序的灵活性和可重用性。此外，在多个微应用程序之间通信和协调非常重要，因为它们需要协调共享状态、事件和路由等方面。

总之，微前端是一种独立应用程序开发、测试、部署和运行的前端架构模式，旨在提高Web应用程序的可维护性、可扩展性和性能。用微前端可以轻松切分一个大型的Web应用为多个独立的微应用，规模越大分的越细。微前端还可以减轻前端应用程序对特定框架或库的依赖，增强了应用程序的灵活性和可重用性。

相关问题

micro-app 微前端如何接入umi3react

接入 umi3 和接入其他 React 应用一样，只需要在主应用中安装 `@umijs/plugin-qiankun` 插件，并在子应用中使用 `qiankun` 的 `registerMicroApps` 方法注册子应用。

具体步骤如下：

1. 在主应用中安装 `@umijs/plugin-qiankun` 插件：

yarn add @umijs/plugin-qiankun -D

2. 在主应用中的 `.umirc.ts` 或 `config/config.ts` 文件中配置 `qiankun` 插件：

export default {
  // ...
  plugins: ['@umijs/plugin-qiankun'],
  qiankun: {
    master: {
      // 主应用配置
    },
  },
};

3. 在主应用中使用 `qiankun` 的 `registerMicroApps` 方法注册子应用：

import { registerMicroApps, start } from 'qiankun';
import React from 'react';
import ReactDOM from 'react-dom';

function render({ appContent, loading }) {
  const container = document.getElementById('app-container');
  ReactDOM.render(
    <div>
      {loading && <p>Loading...</p>}
      <div dangerouslySetInnerHTML={{ __html: appContent }} />
    </div>,
    container,
  );
}

registerMicroApps([
  {
    name: 'sub-app',
    entry: '//localhost:8000',
    container: '#sub-app-container',
    activeRule: '/sub-app',
  },
]);

start();

4. 在子应用中使用 `react-app-rewired` 对 `create-react-app` 脚手架进行配置。

由于 `create-react-app` 脚手架默认隐藏了 webpack 配置，我们需要使用 `react-app-rewired` 来暴露 webpack 配置。具体做法可以参考官方文档：https://umijs.org/plugins/qiankun#%E5%AD%90%E5%BA%94%E7%94%A8

5. 在子应用中导出一个 render 方法，用于子应用启动时挂载到主应用中：

import React from 'react';
import ReactDOM from 'react-dom';

function render(props: any) {
  const { container } = props;
  ReactDOM.render(<App />, container);
}

export default render;

6. 在子应用中使用 `qiankun` 的 `start` 方法启动子应用：

import { start } from 'qiankun';
import render from './render';

// 导出生命周期钩子函数
export const bootstrap = async () => {};
export const mount = async (props: any) => {
  render(props);
};
export const unmount = async () => {};

// 启动子应用
start();

以上就是在 micro-app 微前端中接入 umi3 react 的基本步骤，需要注意的是，在子应用中同样需要安装 `qiankun` 包和 `react` 包，并且在开发时需要同时启动主应用和子应用，才能看到微前端的效果。

micro-app是什么

`micro-app` 是一种微前端解决方案，它可以将多个独立的前端应用集成成一个整体，并实现这些应用之间的通信和协作。

在传统的前端开发中，我们通常将一个 Web 应用作为一个整体进行开发和部署。但是随着应用的不断扩展和演进，单个应用变得越来越臃肿，维护和升级成本也越来越高。

微前端的思想是将一个 Web 应用拆分成多个小的、独立的应用，每个应用都可以独立开发、测试、部署和运行。这样可以降低应用的复杂度，提高开发效率和部署效率。

`micro-app` 是一种基于微前端思想的解决方案，它可以将多个独立的前端应用组合成一个整体，每个应用都可以独立开发、测试、部署和运行。`micro-app` 还提供了完善的通信机制，可以让不同的应用之间进行数据交换和调用。

`micro-app` 的实现方式有多种，其中比较常见的是使用 `qiankun` 和 `single-spa` 这两个框架。这两个框架都提供了一些基础设施和工具，可以方便地实现微前端架构。