渐进式水合岛屿组件

目标

内容型页面一次性加载大量 JS，而多数组件在首屏之外。本配方按用途选择水合策略：关键搜索用 client:load 立即水合，图表用 client:visible、评论用 client:idle，从而把非关键水合推迟；提醒用户会立即交互的元素必须立即水合。

步骤要点

1. 对关键交互组件使用立即水合。
2. 对首屏外组件按可见或空闲水合。
3. 用性能测量验证总阻塞时间下降。
4. 为组件预留空间避免水合引发布局偏移。

<Chart client:visible />
<Comments client:idle />
<Search client:load />

排错提示

• 需立即交互的元素若延迟水合会无响应。
• 水合可能引发布局偏移，需预留空间。
• 不减少总 JS 体积。

适用边界

• 延迟水合会延后可交互时机。
• 策略选择需实测。