微前端：实现“真正”的技术栈无关

最新推荐文章于 2024-04-21 19:01:31 发布

ambit_tsai-微信

最新推荐文章于 2024-04-21 19:01:31 发布

阅读量338

点赞数

分类专栏：前端日志文章标签：微前端前端 qiankun single-spa 微应用

本文链接：https://blog.csdn.net/ambit_tsai/article/details/81090136

版权

本文探讨了微前端实现技术栈无关的重要性，指出DOM、CSS和JS隔离是关键。文中提到，尽管iframe和Web components提供了良好的隔离性，但它们各自存在局限。新一代解决方案<m-app>通过整合iframe与Web components，实现了更完善的隔离，同时降低了应用接入的改造成本。

摘要由CSDN通过智能技术生成

为什么说“真正的技术栈无关”？那是因为目前很多解决方案宣称的“技术栈无关”实现方式都不太理想，自古以来“技术栈无关”做得最好的，当属 <iframe>。然而，大部分微前端方案都不约而同地放弃了 iframe 方案，文章 Why Not Iframe 作了说明，iframe 由于良好的隔离性导致应用间的 UI 无法完美融合，比如 iframe 中的弹窗遮罩无法超越 iframe 的边界，因此我们不得不寻求其它解决方案。

“技术栈无关”作为微前端的核心价值之一，主要表现为基座应用不限制接入应用的技术栈，每个微应用都拥有独立的运行时，能够避免 DOM、CSS、JS 受到外部的影响，或者对其它应用产生影响。

DOM 隔离

很多解决方案并不关心 DOM 隔离问题，因为通常只要提供一个挂载节点，微应用便可以正常初始化。然而，微应用的 DOM 暴露在全局下，便可能被应用外的代码获取到，你无法保证其他人不搞点骚操作，或是本应用的代码对外部产生非预期的影响。当前，能做到 DOM 隔离的技术，除了古老的 iframe 外，只有 Web components。

Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。

Web components 可以维护一个隐藏的、独立的 Shadow DOM，不被外部检索到，从而达成 DOM 隔离的目的。

CSS 隔离

样式隔离是微前端方案解决的关键问题之一，有些方案通过合理的约定来规避 CSS 污染，常见的有 CSS Modules、BEM 规范、CSS-IN-JS 等，然而约定再好也挡不住开发者的非常规操作。而且，对于一个全新的项目，开发规范容易落实，对于现有的项目却可能带来大量的改造工作。其它方案如 qiankun 的“动态样式表”，就算只跑单应用也存在与基座应用相互影响的可能。当下，真正