前端微服务框架选型

一、微前端主流框架介绍

（1）qiankun

        qiankun (蚂蚁金服)它是一个基于 single-spa 的微前端实现库，它可以帮助开发者将多个独立的前端应用集成为一个整体.

        官方文档：https://qiankun.umijs.org/zh/

优点：

（1）灵活性高:支持多种框架多种构建工具；

（2）代码库隔离:代码库隔离性较高；

（3）独立性强:子应用可独立开发、独立部署，不会相互影响；

（4）应用通信:子应用间通信灵活。

缺点：

（1）适配成本比较高:生命周期、静态资源路径、路由等都要做一系列的适配工作;

（2）沙箱: css 沙箱采用严格隔离会有各种问题，js 沙箱执行性能下降严重;

（3）应用保活:无法同时激活多个子应用，也不支持子应用保活;

（2）micro-app

        micro-app (京东)是一个基于 Web Components 的前端微服务框架，支持多种前端框架.

        官方文档：https://zeroing.jd.com/micro-app/docs.html#/

优点：

（1）兼容所有框架；

（2）高度可定制，灵活性强；

（3）零依赖；

（4）开箱即用：提供了is沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的功能；

缺点：

（1）需要时间学习；

（2）对于不支持webcompnent 的浏览器没有做降级处理；

（3）wujie

        wujie(腾讯)是一款基于 Web Components + iframe 的微前端架，具备成本低、速度快、原生隔离、功能强等优点

        官方文档：https://wujie-micro.github.io/doc/api/bus.html

优点：

（1）极速、应用保活；

（2）简单、原生隔离；

（3）原生性能；

（4）开箱即用；

缺点：

需要时间学习；

对于不支持webcompnent 的浏览器没有做降级处理；

目前还比较新，社区相对不够活跃；

(4)使用wujie

        wujie官网：https://wujie-micro.github.io/doc/guide/install.html

        nvm全英文也叫node.js version management，是一个nodejs的版本管理工具。nvm是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。(安装nvm 下载地址：https://nvm.uihtm.com/download.html)

        nvm install 16 --lts 下载node版本

        nvm use 16 使用node指定版本

（1）安装node16

（2）npm install npx；

（3）npx create-wujie@latest；

二、框架对比

 

三、打包部署

（1）主应用与子应用分别打包；

（2）部署时子应用与主应用可以部署到不同的服务器上，并在主应用中配置子应用的地址，然后就可以访问微前端系统；

注意：微前端应用部署后，要确保子应用的静态资源能够被正确加载。如果主应用和子应用使用域名不同，那么需要配置跨域地址。