HTML Entry要求子应用保持自治但需主应用正确处理路径重写、沙箱注入、路由透传等；否则将导致404、全局污染或样式残留。
HTML Entry 能让子应用保持完整构建产物和独立运行能力，但“自治”不等于“免配置”——它依赖主应用正确解析、重写路径、注入沙箱，否则子应用一加载就 404 或全局污染。
为什么子应用 index.html 的 script/src 必须是绝对 URL
fetch 拉取的 HTML 在主应用上下文中执行，document.baseURI 是主应用地址（如 https://main.com/），不是子应用构建时的 publicPath。相对路径如 ./main.js 会被解析成 https://main.com/main.js，必然 404。
- 构建时配置
publicPath为完整 URL（如https://sub.com/），确保产出 HTML 中所有script和link的src/href是绝对路径 - 若无法改构建配置，主应用需在 DOMParser 解析后，对每个
script节点的src执行new URL(scriptSrc, response.url)重写 - 内联
<script>console.log(1)</script>不受路径影响，但必须交由沙箱执行（如 qiankun 的execScripts），不能直接eval或插入innerHTML
DOMParser 解析后不能直接 innerHTML 挂载
直接 container.innerHTML = htmlStr 会跳过路径重写、脚本拦截和样式隔离，导致资源加载失败、JS 全局污染、CSS 泄漏。
- 必须用
new DOMParser().parseFromString(htmlStr, 'text/html')得到 Document 对象 - 遍历
document.scripts和document.stylesheets，分别处理外链与内联资源 -
link[rel="stylesheet"]和style需提取内容并注入<style>标签，同时重写 CSS 中的url(./icon.png)为绝对路径 - 最终只把
document.body的子节点挂载到容器中，避免head冲突或重复注入
子应用路由 base path 必须由主应用显式传入
子应用自己无法感知当前被挂载在 /app1 还是 /app2 下，硬编码 base: '/' 会导致 history.push('/user') 实际跳转到 https://main.com/user，而非 https://main.com/app1/user。
立即学习“前端免费学习笔记（深入）”；
- 主应用挂载前设置全局变量：
window.__MICRO_APP_BASE_ROUTE__ = '/app1' - 子应用初始化路由时读取该变量：Vue Router 用
base: window.__MICRO_APP_BASE_ROUTE__ || '/'；React Router v6+ 用<Router basename={window.__MICRO_APP_BASE_ROUTE__}> - 服务端必须配置 fallback：Nginx 的
location /app1 { try_files $uri $uri/ /app1/index.html; }，否则刷新页面直接 404
样式快照与动态样式残留问题
卸载子应用时删掉 DOM 节点，静态 <link> 和 <style> 确实清除了，但子应用运行时通过 JS 插入的 document.head.appendChild(styleEl) 不会自动回收。
- qiankun 等框架会在卸载阶段执行样式快照比对，只移除本次加载新增的
<style>标签 - 子应用若手动操作
document.styleSheets或插入<link>，需在unmount生命周期里显式清理 - 避免在子应用中使用
document.write或修改document.head，这类操作无法被沙箱捕获和回滚
HTML Entry 的“自治”体现在子应用无需改代码即可接入，但主应用的解析逻辑、路径重写、沙箱注入、路由透传一个都不能少——漏掉任意一环，自治就变成自毁。
