一行代码实现微前端

看到标题，大家首先想到的应该是iframe，诚然iframe的确可以做到，但是我们今天要讲的并不是它，而是新推出的一款微前端框架micro-app。至于为什么不用iframe，可以参考Why Not Iframe。

micro-app是什么

micro-app是一款基于类WebComponent进行渲染的微前端框架，它从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。

micro-app的基本实现思路和single-spa、qiankun类似，但它借鉴了WebComponent的思想，使用CustomElement和自定义的shadowDom，将微前端封装在一个类WebComponent组件中，从而简化了渲染步骤。

如何使用？

1、安装依赖

yarn add @micro-zoe/micro-app

2、引入micro-app

// index.js
import microApp from '@micro-zoe/micro-app'

microApp.start()

3、在页面中使用

<template>
  <div id="app">
    <!--micro-app标签最终会渲染为一个微前端应用-->
    <micro-app name='app1' url='http://localhost:3000/'></micro-app>
  </div>
</template>

渲染效果

可以看出micro-app的使用方式和iframe一样简单，渲染后的html结构和WebComponent类似，那为什么不直接使用WebComponent呢？

主要是因为WebComponent的核心API-ShadowDom的兼容性太差，在react框架下无法正常运行。ShadowDom主要提供两种功能：样式隔离和元素隔离，即子应用和基座应用可以拥有相同的class、id而不会相互影响。

micro-app模拟实现了ShadowDom的功能，使得子应用的样式和元素作用域固定在micro-app元素内部，micro-app元素就拥有了类似ShadowDom的能力。

细心的童鞋看到这里就会发现了，你这明明是三行代码，和标题不符，你这个标题党！

是的