静态优先的微前端加载模型核心是预取、预解析、预执行子应用静态资源，以缩短首屏时间；无界（Wujie）通过 preloadApp + requestIdleCallback 实现该模式，推荐 exec: false 预加载配合骨架屏，需确保资源路径与强缓存策略严格对齐。
静态优先的微前端加载模型，核心是把子应用的 HTML、CSS、JS 等静态资源在用户还没点进去之前就预取、预解析、甚至预执行——不是等路由跳转才开始拉代码，而是利用空闲时间提前干完 80% 的事。无界（Wujie）的 preloadApp + requestIdleCallback 组合就是目前最贴近“静态优先”落地的方案。
为什么必须绕过“按需加载”的默认逻辑
绝大多数微前端框架（包括 qiankun、micro-app）默认走的是“路由触发 → 加载 entry → 解析 HTML → 挂载 JS → 启动应用”链路。这本质仍是“动态优先”，首屏白屏时间直接受子应用包体积、网络 RTT、JS 执行耗时拖累。尤其冷启动时，用户第一次访问子应用页面，没有任何缓存，整个流程从零开始，很容易卡住 1.5s 以上。
静态优先要打破这个链条：把“加载”和“执行”尽可能前置，让子应用资源像主应用一样，在浏览器空闲期就进内存、做预处理，而不是等用户点击才开始下载。
- 不预加载时，子应用首次加载 = 网络请求 + HTML 解析 + JS 下载 + JS 执行 + 渲染，全链路阻塞
- 预加载后，子应用首次加载 ≈ 沙箱激活 + mount + render，JS 已在内存，HTML/CSS 已解析完毕
- 关键区别在于：是否把
fetch和eval这两个最耗时环节挪到空闲期完成
用 preloadApp 实现静态资源预加载（无界 Wujie）
无界提供了明确的预加载 API，且默认集成 requestIdleCallback 调度，避免抢占主线程。它不是简单 fetch 一下就完事，而是完整模拟了子应用加载流程的前半段：下载 HTML、提取 script/style 标签、预解析、缓存资源 URL 映射关系。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
典型用法：
import { preloadApp } from 'wujie';
// 在主应用空闲时（比如首页渲染完成后）
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
preloadApp({
name: 'sub-vue-app',
url: 'https://cdn.example.com/sub-vue-app/index.html',
// 注意：url 必须是子应用的 HTML 入口，不是 JS bundle
exec: false, // 不执行 JS，只预加载资源
});
});
}
-
exec: false是关键，它禁用 JS 执行，只做资源预取和解析，避免副作用和性能干扰 - 预加载的资源会进入无界内部缓存，后续
startApp时直接复用，跳过网络请求 - 如果子应用用了 hash 文件名（如
app.abc123.js），预加载仍有效；但若用 query 参数（如app.js?v=1.2.3），需确保预加载与实际加载的 URL 完全一致，否则缓存失效 - 不建议在
beforeEach路由守卫里调用preloadApp，那已错过空闲窗口；应放在主应用mounted或onLoad后延时触发
预执行（Pre-execution）的边界与风险
无界支持 exec: true 的预执行模式，即在预加载阶段就把 JS eval 掉，甚至运行到 beforeMount 阶段。这能进一步压缩白屏时间，但代价明显：
- JS 执行会占用主线程，
requestIdleCallback无法完全兜底——尤其子应用有 heavy init 逻辑时，可能造成主应用卡顿 - 预执行的上下文（如
window、document）是沙箱内的，但部分依赖全局状态的库（如某些 SDK 初始化）可能失败或产生脏数据 - 子应用若在
script中直接调用new Vue()或ReactDOM.render()，预执行会提前挂载 DOM，导致后续正式启动时报错“重复挂载” - 真正安全的预执行，仅适用于纯逻辑型子应用（如工具类、配置中心），且需子应用主动配合：暴露
bootstrap/mount/unmount生命周期，并确保mount不做 DOM 操作，只返回渲染函数
实践中，90% 场景推荐 exec: false + 骨架屏组合；只有对白屏极其敏感、且子应用高度可控的业务（如内部管理后台），才考虑 exec: true 并加白名单控制。
静态资源路径与缓存策略必须对齐
预加载再快，如果子应用的 CSS/JS 资源本身没开强缓存，每次预加载都得重新请求，等于白忙一场。无界通过 createApp 支持全局缓存配置，但前提是子应用构建时也做了对应适配：
- 所有静态资源（JS/CSS/字体/图片）必须带 content-hash（如
main.a1b2c3.js），不能用 version query（main.js?v=2.1） - CDN 或 Nginx 需为带 hash 的资源设置
Cache-Control: max-age=31536000，实现一年强缓存 - 子应用 HTML 入口本身不宜强缓存（因它不含 hash），建议设为
max-age=600，避免 HTML 更新后资源引用失效 - 无界内部会基于 URL 做资源去重，但如果子应用用了相对路径（如
./assets/app.js），而预加载和正式加载时 base URL 不一致（比如一个走https://a.com，一个走https://b.com），缓存将失效
最容易被忽略的一点：子应用构建输出的 public 目录资源，必须和 HTML 中写的路径完全一致；否则预加载拿到的 URL 和实际运行时的 URL 对不上，缓存形同虚设。
