qinkun的缓存机制也有弊端,建议官方个参数控制

公司前端基于qiankun架构,主应用通过qiankun加载子应用,子应用也可能通过qiankun继续加载子应用,反复套娃。经过测试,不断打开子应用后,会导致内存不断上上。通过快照分析 ,发现内存升高的元凶是qiankun内置的# import-html-entry

import-html-entry 的作用是什么

import-html-entry 是 qiankun / single-spa 微前端生态的核心模块之一,用来:

加载远程 HTML 入口文件(entry HTML),并提取出其中的 JS / CSS / 静态资源,然后按需执行或注入。

比如:

js 复制代码
import { importEntry } from 'import-html-entry';

const { execScripts } = await importEntry('https://wwww.石小石.com/');
const exports = await execScripts(window);

简单来说,import-html-entry 负责做三件事:

下载远程 HTML 文件

  • 使用 fetch(url) 请求远程 HTML。
  • 解析 HTML 中的 <script><link> 标签。

提取资源并缓存

  • 提取脚本与样式资源 URL。
  • 通过自定义逻辑加载(并缓存)外部脚本与样式内容。
  • <link> 替换为内联 <style>,提升加载性能。

执行脚本

  • 通过 eval 在隔离作用域中执行 JS(防止污染主应用的 window)。
  • 支持 proxy 代理对象(qiankun 沙箱核心)。
  • 支持同步、异步脚本的加载与执行顺序。

核心源码

它的 源码中包含这些关键函数:

函数名 作用
importHTML(url, opts) 主入口,加载远程 HTML
processTpl 解析 HTML 模板,提取 script/link
_getExternalScripts 加载并缓存 JS
_getExternalStyleSheets 加载并缓存 CSS
_execScripts 按顺序执行脚本
getExecutableScript 包装脚本为沙箱可执行代码
evalCode 实际执行脚本(带缓存)

缓存机制

import-html-entry 内部维护了四个全局缓存对象, 这些缓存的目的是 在同一个浏览器会话中,当多个子应用或同一个子应用多次加载同一个 URL 时,避免重复网络请求,从而加快微前端加载速度。

js 复制代码
var styleCache = {};    // 样式字符缓存
var scriptCache = {};   // js字符缓存
var embedHTMLCache = {};// html字符缓存
var evalCache = {};     // 编译后的脚本缓存

styleCache对应源码:

scriptCache对应源码:

embedHTMLCache对应源码:

evalCache对应源码:

缓存机制在子应用多开频繁销毁创建场景中的弊端

在单实例的 qiankun 架构 中,import-html-entry 的缓存仅会存在一份,对内存的占用影响有限,缓存带来的性能收益相对较高。

但如果系统存在大量qiankun加载子应用的场景,比如要频繁打开若干子应用(类似于菜单),子应用需要频繁打开销毁(tab切换等),同时其内部的部分功能模块又会再次通过 qiankun 动态加载子应用。这种嵌套加载结构会导致 import-html-entry 在多个层级重复缓存资源,即使资源内容相同,也会被多次存储。

因此,子应用的频繁打开与卸载,会导致内存占用持续增长,从而引发明显的性能下降(国产CPU可能更明显)。

因此,移除或禁用 import-html-entry 的缓存机制 ,能极大缓解内存泄漏问题,提升系统在复杂场景下的运行性能与稳定性

优化方案

缓存名 缓存内容 缓存目的 禁用影响
styleCache 每个 CSS 链接的内容(文本) 避免重复请求相同样式文件 每次重新请求 CSS(但浏览器会命中协商缓存,影响极小)
scriptCache 每个 JS 链接的内容(文本) 避免重复请求相同脚本文件 每次重新请求 JS(命中浏览器缓存,影响较小)
embedHTMLCache 整个 HTML 模板字符串 避免重复请求入口 HTML 文件 每次重新请求入口文件,性能略降
evalCache 每个脚本的已编译函数 (function(){...}) 避免多次 eval 编译同一脚本字符串,提升运行性能 每次都重新 eval 解析 JS 字符串,会略微影响性能(CPU 负担)

浏览器自带的协商缓存已能高效复用 HTML、JS、CSS 资源,因此禁用 import-html-entry 的缓存逻辑几乎不影响加载性能。
evalCache 的移除可能短暂增加 CPU 开销降低性能,但整体影响可能较小,需要综合评估。

通过在 qiankun 集成层中移除多余缓存,可有效降低内存占用,缓解泄漏问题,并显著提升系统性能与稳定性。

相关推荐
前端加油站11 小时前
记一个前端导出excel受限问题
前端·javascript
da_vinci_x11 小时前
PS 生成式扩展:从 iPad 到带鱼屏,游戏立绘“全终端”适配流
前端·人工智能·游戏·ui·aigc·技术美术·游戏美术
一壶纱11 小时前
uni-app 中配置 UnoCSS
前端·vue.js
步履不停_11 小时前
告别输入密码!打造基于 VS Code 的极致远程开发工作流
前端·visual studio code
狗哥哥11 小时前
Vue 3 企业级表格组件体系设计实战
前端
尘世中一位迷途小书童12 小时前
JavaScript 一些小特性:让你的代码更优雅高效
前端·javascript·架构
草帽lufei12 小时前
高强度SOLO真实业务项目
前端·ai编程·trae
1024肥宅12 小时前
告别异地登录告警!用 GitHub Self-Hosted Runner 打造“零打扰”全栈自动化部署
前端·后端·github
GDAL12 小时前
CSS重置样式表(Reset CSS
前端·css
SpringLament12 小时前
TanStack Virtual 源码解析:定高/不定高虚拟列表实现原理以及框架无关设计
前端·javascript