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

Lvan的前端笔记

2024-04-23 帮助1人

背景

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>

甚至说，我们把 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、通过 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

这篇好文章是转载于：学新通技术网

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

背景

源码解析过程

总结

参考资料

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐