浅谈微前端

使用场景

一般来说有两种场景可能会考虑微前端。

一个大型系统被拆分成一个个的组件或小系统，然后每个组件都由一个小的团队开发。这时候这个大的系统就需要被集成，微前端是一种很好的集成机制。每个组件各自维护，互不干扰，还可以动态插拔。
老项目技术栈落后，但是一直有新的需求，比如在旧的页面里面嵌入一个表格，你想使用当下流行的技术，减少开发成本。那么微前端也是一种不错的选择。

基于上面的使用场景我们可以大概想象得到一个微前端应用是长下面这样的(以qiankun为例)

先注册子应用，qiankun会根据配置信息entry知道要加载哪些资源

子应用的入口js一般推荐用webpack umd打包，使用umd是因为要导出一些生命周期函数给qiankun调用。

qiankun拿到入口js后不是立即执行的，这里它要做js隔离，其实主要就是做window对象的隔离。

原理是拿到js代码后，给代码包裹一层立即执行函数，然后把window挂到一个proxy对象上，然后再eval执行js代码。

const script = `
    ;(function (window) {
        // 入口js代码
    })(proxy)
`
eval(script)

这一点qiankun好像并不能做到很好的隔离。除非用到shadow dom，但是用这个有一定成本，所以也没有用到。

我们日常开发中其实是可以通过约定规范做到css隔离的，我们的样式代码都用scope作用域，然后在打包css的时候可以在css-loader里加个前缀，这样子就能起到隔离作用了。

我们还要考虑应用之间的通信问题。qiankun提供了globalState的方法很方便的实现了能在应用之间进行通信。

解决上面4个问题，我们就能实现一个简单的微前端框架了。