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

最新推荐文章于 2023-02-09 16:35:14 发布

Lvan的前端笔记

最新推荐文章于 2023-02-09 16:35:14 发布

阅读量2k

点赞数 1

分类专栏： # 微前端文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_43972437/article/details/127721716

版权

微前端专栏收录该内容

8 篇文章 2 订阅

订阅专栏

背景

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

Lvan的前端笔记

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
微前端：qiankun的依赖import-html-entry的作用

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

扫一扫