微前端概念由微服务概念延展而来,摒弃大型单体方式,将前端整体分解为小而简单的块,这些块可以独立开发、测试和部署,同时仍然聚合为一个产品出现在客户面前。
微前端不是一门具体的技术,而是整合了技术、策略和方法,可能会以脚手架、辅助插件和规范约束这种生态圈形式展示出来,是一种宏观上的架构。这种架构目前有多种方案,都有利弊之处,但只要适用当前业务场景的就是好方案。
1、iframe
iframe是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的特点在其