当前位置: 首页 > 科技观察

这么好的微前端解决方案你顶得住吗?

时间:2023-03-21 15:16:38 科技观察

微前端的概念是从微服务的概念延伸出来的。摒弃大规模单一的做法,将整个前端分解成小而简单的块。这些块可以独立开发、测试和部署,同时仍然聚合成一个产品,以前出现在客户面前。微前端不是一种具体的技术,而是集成了技术、策略和方法,可能以脚手架、辅助插件、规范约束等生态系统的形式展现。它是一个宏观架构。这种架构目前有很多解决方案,各有优缺点,但只要方案适用于当前的业务场景,就是一个好的方案。1、iframeiframe是html提供的一个标签,可以加载其他web应用的内容,兼容所有浏览器,所以它可以加载所有你想加载的web应用。它最大的特点是提供了浏览器原生的硬隔离方案,可以完美解决样式隔离、js隔离等问题。虽然iframe基本可以做到微前端该做的所有事情,但是它的隔离性无法突破,导致应用之间无法共享上下文,这会给开发体验和产品体验带来问题。不是单页应用,会导致浏览器状态刷新iframeurl丢失,后退前进按钮不起作用。2、ESModule微前端无非是三大特点,无技术栈限制,独立应用开发,多应用集成。无技术栈限制:ESM只加载js内容,不管是哪个框架,最后都要编译成js,ESM才能加载。独立开发应用:ESM只是js的一种规范,不会影响应用的开发方式。多应用集成:只要将微应用以ESM的形式暴露出来,就可以正常加载。远程加载模块:ESM可以直接请求cdn资源。ESM也有兼容性的缺点。大部分老版本浏览器不能直接使用,但可以通过webpack、rollup、esbuild、snowpack等编译工具成为兼容代码。3.qiankun在微前端领域,qiankun可以说是最早也是知名度最高的框架。qiankun的特点在其官网是这样表述的:基于single-spa封装,提供更加开箱即用的API技术栈无关,任何技术栈应用都可以使用,无论是React/Vue/Angular/JQuery或其他框架HTMLEntry访问方式,让您访问微应用就像使用iframe一样简单样式隔离确保微应用样式不干扰彼此的JS沙箱,以及微应用之间的全局变量/事件不要与资源预加载冲突。4、实现EMPFederation,实现第三方依赖共享,减少不必要的代码引入。每个微应用都是独立部署运行,通过CDN引入到主程序中,因此只要部署一次就可以提供给任何基于ModuleFederation的应用。而且这部分代码是远程引入的,不需要参与应用的打包。EMP通过CDN加载微应用,当每个微应用中的代码发生变化时,无需重新打包发布即可加载到最新的微应用。每个微应用都可以引入其他微应用,没有中心应用的概念。跨技术栈组件调用提供了调用主应用框架中其他框架组件的能力。开发者可以按需加载,选择加载微应用需要的部分,而不是强行加载整个应用。每个应用程序都可以共享状态,就像使用npm模块进行开发一样,非常方便。除了微前端的能力,EMP还具备跨应用共享状态、跨框架调用组件的能力。这就是它厉害的地方!