当前位置：首页 > news >正文

微前端记录

news 来源：原创 2025/7/23 15:08:25

微前端

实习过程中，做了些微前端方向的调研，记录下
微前端将前端拆分为独立的可以单独运行，测试，部署的代码，具有技术栈无关，多团队，多业务线协作的特点。
前端现有的页面，分为单页应用和多页应用，各有优劣， spa单页通信方便，前进后退对用户的感知友好。提前预加载等性能优化措施。mpa将系统分为多个仓库维护，在首页聚合所有平台的入口
iframe 在微前端框架流行前，是一种非常好的解决方案，这是浏览器的原生的隔离方案，主要是样式隔离，js隔离等等问题都能被轻松的解决到。但是隔离性无法突破，导致应用上下文之间无法被共享。主要涉及路由不同步，刷新，前进后退的失效，dom割裂，通信困难，白屏事件，并且并非一个文档上下文，那么对于事件的冒泡捕获等等就会有影响。预加载，共享组件库等问题。
还可以通过发npm包来实现，通过npm包的形式引入，当公共组件升级，那么项目要宠幸升级上线。
这种方式也丧失了动态下发代码的能力。
模块联邦的方式，主要是EMP，欢聚时代，我尝试的时候，对于已有项目的接入不太友好。一种远程模块动态加载，运行技术。允许将当前构建的应用作为容器应用，异步加载远程模块，允许将原本的单个应用按照理想的方式拆分，然后进行加载。
但是缺少沙箱隔离，可能会导致js变量污染。缺乏css隔离，版本控制，需要显示配置路径，版本控制存在和npm一样的缺点。
尽管iframe存在问题，但是可以借助其思想。 iframe 加载文档，1. 文档加载，2. html渲染，3. JavaScript执行，4. JS隔离。
spa的微前端架构，从设计层面上是基座和子应用分治。基座进行注册，并下发信息，子应用收到信息后，进行渲染。

考虑

1，应用加载，在应用没有被激活之前，需要考虑应用层面对不同标准的应用的时候，框架需要的加载策略是不同的，js bundle 和umd规范的标准。fetch script标签的能力，但是对于esm 的标准，需要使用动态import的方式。设计预加载，html入口，拆分dom style script js入口，解析子应用
2. 应用调度，提供子应用的声明周期
3. 沙箱隔离收集副作用，多个实例收集副作用
4. 路由系统不用应用路由不同步，不用应用对路由的响应路由劫持系统
5. 应用通信

副作用

html中包含，script style link
动态副作用动态创建的style ，link dom，添加全局变量，添加定时器，网络请求，localstorage 等对当前页面产生影响的内容

隔离

快照沙箱
通过快照的方式来保存当前的执行环境，在应用销毁后，回退到之前的执行环境
css样式隔离方案
css模块化，通过import方式来引入样式
样式约定以及工程化，各个子应用都约定自己的特有前缀
shadow dom
完全解决了样式隔离，游离在dom树之外的shadow dom，将dom和css隔离开来，但是由于浏览器的兼容问题，可靠性得考虑
Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。
在这里插入图片描述

css in js
动态加载卸载样式表

微前端

考虑

副作用

隔离

未完待续

相关文章：