美文网首页
前端微服务框架选型

前端微服务框架选型

作者: 阿鱼鱼_shelly | 来源:发表于2024-01-29 10:44 被阅读0次

    一、微前端主流框架介绍

    1qiankun

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

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

    优点:

    (1)灵活性高:支持多种框架多种构建工具;

    (2)代码库隔离:代码库隔离性较高;

    (3)独立性强:子应用可独立开发、独立部署,不会相互影响;

    (4)应用通信:子应用间通信灵活。

    缺点:

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

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

    (3)应用保活:无法同时激活多个子应用,也不支持子应用保活;

    2micro-app

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

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

    优点:

    (1)兼容所有框架;

    (2)高度可定制,灵活性强;

    (3)零依赖;

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

    缺点:

    (1)需要时间学习;

    (2)对于不支持webcompnent 的浏览器没有做降级处理;

    3wujie

            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)部署时子应用与主应用可以部署到不同的服务器上,并在主应用中配置子应用的地址,然后就可以访问微前端系统;

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

    相关文章

      网友评论

          本文标题:前端微服务框架选型

          本文链接:https://www.haomeiwen.com/subject/pgpgodtx.html