微前端：qiankun的依赖import-html-entry的作用

背景

import-html-entry 这个库是微前端框架 qiankun 的一个重要的依赖库，其功能是主应用拉取子应用并渲染出来，那么抱着好奇的心态，我今天来扒一扒其中的原理。

在说之前呢，我们先来说一说一个前端应用为什么能运行起来，靠的就是 html、css、js 这三个东西，如今的 React、Vue 等 SPA 应用最终打包出来的也是这三个东西，只不过 html 中的内容少了，js 中的内容多了，如下：

DOCTYPE html>
<html lang=en>

<head>
  <meta charset=utf-8>
  <meta http-equiv=X-UA-Compatible content="IE=edge">
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
  <link href=//xxx.com/repository/project-name/dist/css/chunk-vendors.406a56ae.css
    rel=stylesheet>
  <link href=//xxx.com/repository/project-name/dist/css/app.f083b18d.css
    rel=stylesheet>
head>

<body>
  <div id=app>div>
  <script src=//xxx.com/repository/project-name/dist/js/chunk-vendors.f00734a5.js>script>
  <script src=//xxx.com/repository/project-name/dist/js/app.83d6a4c7.js>script> 
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

甚至说，我们把 css、js 内嵌到 html 中，那么一个 html 文件就可以让我们运行起来这个应用。

其实 import-html-entry 做的就是把如上代码中的 js、css 通过 fetch 拉取出源代码并内嵌到这个 html 中，变为一个包含内嵌 js、css 源码的 html 文件。

源码解析过程

以这个地址为例：http://xxx.com，这个地址指向的前端 html 文件代码如下：

DOCTYPE html>
<html lang=en>

<head>
  <meta charset=utf-8>
  <meta http-equiv=X-UA-Compatible content="IE=edge">
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
  <link href=//xxx.com/repository/project-name/dist/css/chunk-vendors.406a56ae.css
    rel=stylesheet>
  <link href=//xxx.com/repository/project-name/dist/css/app.f083b18d.css
    rel=stylesheet>
    <style> h1 { font-size: 40px; } style>
head>

<body>
  <div id=app>div>
  <script src=//xxx.com/repository/project-name/dist/js/chunk-vendors.f00734a5.js>script>
  <script src=//xxx.com/repository/project-name/dist/js/app.83d6a4c7.js>script> 
  <script>console.log('这是内联script');script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1、通过 fetch 获取到 url 对应的全部内容，也就是这些代码字符串
2、从1中的字符串中解析出三部分内容（主要通过正则解析）：
2.1 经过初步处理后的 html（去掉外链css、去掉外链js）
2.2 script 数组，如 ['//xxx.com/repository/project-name/dist/js/chunk-vendors.f00734a5.js', '//xxx.com/repository/project-name/dist/js/app.83d6a4c7.js', ]
2.3 style 数组，如 ['xxx.com/repository/project-name/dist/css/chunk-vendors.406a56ae.css', '//xxx.com/repository/project-name/dist/css/app.f083b18d.css']
3、fetch 对应的 js、css，内联到第 1 步获取到的 html 中

以上只是个大概的流程，比较细致具体的可以看参考资料中的文章。

总结

在微前端 qiankun 中，使用 import-html-entry 获取到子应用也就是某个 url 对应的 html 文件，并且这个 html 已经嵌入好了 js、css，同时还可以直接执行子应用的所有 js 脚本且此脚本还为 js 隔离（避免污染全局）做了预处理。

参考资料

https://blog.csdn.net/qq_41800366/article/details/122093720

相关阅读:
linux设备模型：sysfs(kobject)解析
我们被一个 kong 的性能 bug 折腾了一个通宵
度矩阵、邻接矩阵
分布式消息中间件之RabbitMQ学习笔记[一]
矢量图形编辑软件Boxy SVG mac中文版软件特点
SpringBoot海景房出租管理系统+代码讲解
二进制部署1.23.4版本k8s集群-6-部署Node节点服务
【C】手把手详细实现简单通讯录
各机构如何加强网络渗透、“渗透”防御
网页按钮点击动画

原文地址：https://blog.csdn.net/weixin_43972437/article/details/127721716