微不微前端的这个话题，其实是要根据自己的业务需求进行选择的。在适当的时候选择适当的架构与方案才是程序员的必修课。

当然我国内企业的IT都喜欢卷，就算自己的企业没达到那个量就直接使用微服务，微前端（我曾经遇到一个4人团队就想使用微服务开发服务端），但是怎么说呢？分工不明细很难做到领域隔离。

如果你现在存在的企业拥有14人以上，那微应用是一个初步的选择。

像我们现在的项目，现在拆分了多个模块，但是有一个模块还没拆分完。

这个模块又原来的80MB才分到如今的51MB的源代码文件，经历了太多太多的事情。才能把构建的效率提升到10分钟内构建完。

好了为什么我们需要微应用？由于的你的项目一直在迭代项目源代码越来越大，当然也有一个很致命的原因就是浏览器的对js兼容性问题，还有node.js本身就是一个文件依赖的机制。导致我吗需要把文件进行转译工作，与其他语言不一样的是，node.js的编译是文件编译，也会有读写IO的问题导致构建效率的快慢。这个时候我们为了提高开发效率和上线的部署方案，一般的方案都会把大的东西，拆分成小的东西进行加载。

比如React Fiber算法，也是这么一个原理，拆成一个一个小的任务进行调度。让别人感动质的提升。

刚刚说的node.js的依赖是一个文件依赖。国内用的比较多的React脚手架应该是umi.js吧，我承认他是一个很不错的脚手架，但他却是一个编译框架，如果你选择了umi.js在项目做大了之后，你会在umi.js四个东西搞得很头痛。

第一个是umi.js自豪的mfsu,使用之后有很多东西会出现奇奇怪怪的问题。不使用编译是真的巨慢！

第二个是.umi 的 cache。这个东西会直接导致你不能使用pnpm来做包管理器。

第三个是copy-webpack-plugin这个插件。没写完一次，都需要把文件进行拷贝一次。

第四个应该也不算吧，这个看项目定义的。如果你项目使用的less的话，那么恭喜你项目大了less-loader是真的巨慢无比，早用tainwindcss早解放。

好了做了这么多的铺垫，进入今天的主题，开启你的第一个微前端。很多东西不是你学完就马上去落实，而是经过知识的沉淀，你想到什么场景用什么才是正解。我是不喜欢为了kpi而kpi，为卷死同行而卷四同行。

基于Create React App 与 qiankun 搭建你的微前端。

qiankun这个框架，你不要管这么多东西。他是single-spa一个封装，single-spa使用的时候需要配置的东西其实也蛮多。那么qiankun帮我吗简化了很多操作，简化到了5个api即可完成。

总结下来你只需要记住两个步骤即可。

第一步需要有一个入口应用，里面需要把你的微应用进行配置。 第二步，创建一个微应用，这个微应用题个一个入口文件，需要实现四种生命周期，如果你比较懒的话可以实现一个 mount 渲染周期也行。

#入口应用文件，只需要这么做即可
import './bootstrap';
import { registerMicroApps, start, MicroAppStateActions, initGlobalState } from 'qiankun';
import { ConfigurationFatory } from '@linkseeks/core';

const appConfig = ConfigurationFatory.getInstance()
appConfig.setConfig("mircoTest", "Test123")

const state = {}
const actions: MicroAppStateActions = initGlobalState(state)

actions.setGlobalState({
  appConfig
});


registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: 'http://localhost:4002',
    container: '#app2',
    activeRule: '/app2',
  }
])

start()

# 微应用
import ReactDOM from 'react-dom/client';
import App from './App';
//import './bootstrap';

export let appConfig: any = {};

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

export async function mount(props: any) {

  props.onGlobalStateChange((state: any, prev: any) => {
    appConfig = state.appConfig;
  }, true)

  const root = ReactDOM.createRoot(
    props.container ? props.container.querySelector('#micro1') : document.getElementById('root')
  );
  root.render(<App />)
}

export async function unmount(props: any) {
  const root = ReactDOM.createRoot(
    props.container ? props.container.querySelector('#micro1') : document.getElementById('root')
  );
  root.unmount()
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props: any) {
  console.log('update props', props);
}

是的qiankun就是这么简单就让你的微前端运行起来了。也没有网上说的那么恐怖，写这么很多东西才能运作。

思考。

微应用与微应用直接的服务通信你应该如何处理？

在qiankun里面提高了一个initGlobalState的通信机制。但是这个通信机制有点简单，怎么说呢？他是一个观察者的模式，只要有变动，其他的微应用都会介绍到变动。也就是说所有的子应用都会做出对应的操作。但是往往对于微应用来说，我们只需要最依赖的应用做出对应的操作即可。

这里的我是推荐大家使用发布订阅的模式去做这个操作，在这里推荐使用rxjs。可以把一下事件异步操作封装起来供给其他的微应用使用。当然简单的处理也可以使用hooks，但是你用hooks只能满足当前的技术栈架构，比如vue hooks只能在vue上使用，react hooks只能在react上使用，这个就要看自己的取舍了。

关于微应用之间是如果实现 url的跳转

因为single-spa已经帮我们做了路由监听了。在url的跳转使用html5的history.api即可。也就是如下操作

window.history.pushState({}, '', "/app3")