微前端（下）

最新推荐文章于 2024-09-05 11:16:10 发布

huiiyu0

最新推荐文章于 2024-09-05 11:16:10 发布

阅读量78

点赞数

分类专栏：工作学习文章标签：前端 javascript css

本文链接：https://blog.csdn.net/sketchlcy/article/details/129446492

版权

学习同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

工作

12 篇文章 2 订阅

订阅专栏

文章探讨了单页应用的路由模式，强调了在处理路由变化时需要监听多个事件。介绍了子应用的加载策略，包括JSEntry和HTMLEntry，并详细阐述了import-html-entry的工作流程。此外，文章还讨论了沙箱机制用于保持全局状态的隔离，以及CSS隔离的两种方法：DynamicStylesheet和编译改造。这些技术都是微前端架构中的关键要素。

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

技术细节

本文中的技术细节主要参考乾坤为主，各框架内部实现各有差异，但总体方向上不会有太大的区别。

路由劫持

目前单页应用使用路由的方式分为两种：hash 模式，history 模式。这两种方式中都无法完全依赖单个原生事件来覆盖所有场景需要做一些兼容工作。
在这里插入图片描述
我们除了需要监听popstate、hashchange这两个事件外。在调用 pushState 以及 replaceState 也会造成路由变化，但不会触发事件，因此我们还需要去重写这两个函数。

渲染子应用

渲染子应用的第一步首先要加载子应用资源，我们可以通过应用注册时的 entry 字段拿到资源入口。这里入口资源加载分为两种方案：

JS Enrty：需要将整个微应用打包成一个 JS 文件，对子应用改造较大，同时丧失了按需加载、首屏资源加载优化、css 独立打包等优化措施。
HTML Entry：由 import-html-entry 库实现的，通过 http 请求加载指定地址的首屏内容即 html 页面，然后解析这个 html 模版得到 template, scripts , entry, styles。

{
  template: 经过处理的dom结构，link、script 标签都被注释掉了,
  scripts: [脚本的http地址 或者 { async: true, src: xx } 或者 代码块],
  styles: [样式的http地址],
  entry: 入口脚本的地址，要不是标有 entry 的 script 的 src，要不就是最后一个 script 标签的 src
}

import-html-entry 的加载过程：
a. fetch 请求获取 HTML 内容。
b. 解析 html 为相对资源路径拼接上正确的域名并找出 link、script 标签下对应的 script、css 资源。
c. 返回替换后的 template，及加载后的远程和 inline 的 js、css。
在这里插入图片描述

沙箱

记录用快照的方式在加载子应用前记录全局状态并在卸载时还原记录的状态。
通过 proxy（或 defineproperty）劫持对 window 的操作并创建一个 fakeWindow 对象，赋值操作都发生在 fakeWindow 对象下，取值时按照 fakeWindow -> window 的顺序依次查找。

CSS隔离

Dynamic Stylesheet：在应用切出/卸载后，同时卸载掉其样式表即可，原理是浏览器会对所有的样式表的插入、移除做整个 CSSOM 的重构，从而达到插入、卸载样式的目的。这样即能保证，单应用场景下在一个时间点里，只有一个应用的样式表是生效的。
编译改造：提供一个 postcss 插件，在应用构建的时候给所有的样式都加上应用前缀包括应用公共库的 CSS。
域隔离：为每个 css 规则添加特定的前缀来起到隔离的作用。