Umi + qiankun 实现动态加载子应用路由

Umi 是一个基于 React 的企业级前端应用框架，提供了丰富的特性和工具，方便快速构建中大型应用。qiankun 是一个轻量级的 JavaScript 模块懒加载工具，能够按需动态加载模块，优化代码分割和路由切换。
使用 Umi 和 qiankun 实现动态加载子应用路由可以带来以下好处：

1. 提高性能：通过按需加载子应用路由，仅在需要时加载对应的代码，减少了不必要的资源加载，提高了页面加载速度。
2. 优化用户体验：用户在访问子应用时，可以快速加载对应的页面，减少了等待时间，提高了用户体验。
3. 模块化开发：qiankun 支持按需加载模块，使得开发人员可以按模块划分开发任务，提高了开发效率和代码可维护性。
   下面是一个简单的示例，演示如何使用 Umi 和 qiankun 实现动态加载子应用路由：
4. 首先，安装 Umi 和 qiankun：

   npm install umi qiankun --save

5. 在 Umi 项目中引入 qiankun：

   import { onRouteEnter, onRouteLeave } from 'umi';
   import qiankun from 'qiankun';

6. 在主应用入口文件（例如 index.js）中配置 qiankun：

   // index.js
   import React from 'react';
   import { render } from 'umi';
   import App from './src/App';
   import registerServiceWorker from './registerServiceWorker';
   import qiankun from 'qiankun';
   import './config'; // Umi 项目配置文件，用于设置入口等
   // 初始化 qiankun
   qiankun.config({
   entry: '/entry', // 主应用的入口路径
   container: '#root', // 主应用的挂载容器选择器
   });
   // 渲染主应用
   render(<App />, document.getElementById('root'));
   registerServiceWorker();

7. 在子应用入口文件（例如 sub-app/index.js）中配置 qiankun：

   // sub-app/index.js
   import React from 'react';
   import { render } from 'umi';
   import App from './src/App';
   import registerServiceWorker from './registerServiceWorker';
   import qiankun from 'qiankun';
   import './config'; // 子应用的配置文件，用于设置入口等
   // 初始化 qiankun 子应用实例
   const subApp = qiankun.create({
   name: 'sub-app', // 子应用的名称
   container: '#sub-app-container', // 子应用的挂载容器选择器
   });
   subApp.config({}); // 配置子应用的相关选项（例如 base、routes 等）
   subApp.register(); // 注册子应用实例，使其可被主应用访问和路由控制
   // 渲染子应用组件
   render(<App />, document.getElementById('sub-app-container'));
   registerServiceWorker();

8. 在 Umi 项目中的路由配置文件（例如 src/routes.js）中引入 qiankun 并设置路由规则：
   ```javascript
   // routes.js
   import React from ‘react’;
   import { Route, Switch } from ‘umi’;
   import qiankun from ‘qiankun’; // 引入 qiankun 模块
   import SubApp from ‘./sub-app/index’; // 引入子应用组件，作为路由的匹配目标之一
   import registerServiceWorker from ‘./registerServiceWorker’; // 注册 Service Worker 文件，实现离线缓存等功能（可选）
   import ‘./config’; // Umi 项目配置文件，用于设置路由规则等（可选）
   // 设置路由规则，使用 qiankun 控制子应用的路由切换和懒加载等操作（可选）
   const { switchRoute } = qiankun; // 获取 qiankun 的 switchRoute 方法，用于控制子应用的路由切换和懒加载等操作（可选）