Qwik 1.20 · 可恢复性 demo
这个页面一开始只带了这么点 JS
首屏不需要 hydration；重型数据要等你点，点之前网络里根本没有它。
首屏账单
…首屏 JS（挂载瞬间）
…当前已下载（含预取）
…HTML 文档
「当前已下载」会随时间变大 —— Qwik 会在**空闲时后台预取**其它 chunk，这样你点任何东西都不用等。 那部分不算首屏成本，因为首屏该跑的东西早就跑完了（对照：同体量 Next / Nuxt 首屏 JS 常见 200~500KB）。
交互 1 · 计数器
随首屏可用没有 hydration —— 页面从一开始就是「活的」，不需要先把 JS 跑一遍再重新绑定事件。
0点了 0 次
交互 2 · 按需拉 400KB 数据
约 413 KB6 万个数据点存在 /heavy-data.json。它不是 JS，Qwik 的后台预取拿不到它 —— 所以下面这个数字是真实的新增下载量。点之前，DevTools 的 Network 里找不到这个文件。
它跟 React / Vue 差在哪
| 传统 hydration | Qwik resumability | |
|---|---|---|
| 首屏做什么 | 下载全站 JS → 从头执行一遍 → 重新挂事件 | 只下载用到的碎片，事件状态直接从 HTML 里「恢复」 |
| 组件代码 | 通常首屏就一起下了 | 按需拆分，空闲时后台预取（点了不卡） |
| 数据 | 也能懒加载，但得自己写 | 一样得自己写；差别在框架不会把所有代码都塞首屏 |
| 代价 | 首屏大、主线程忙 | 心智模型要重学（$ / 序列化边界）；生态小 |
自己验证：DevTools → Network → 勾 Disable cache → 刷新，先看首屏拉了什么；过几秒再看，会多出 Qwik 预取的 chunk；最后点那个按钮，看 413KB 的 json 才出现。