默认零 JS — Astro Islands 工作原理
Astro 默认输出纯 HTML + CSS,零客户端 JS。需要交互的组件才作为「岛屿」单独水合。喵~
默认是静态的
一个 .astro 组件里写的 <script> 会被打包,但组件本身不会带框架运行时。你写 React/Vue/Svelte 组件,只有标了 client:* 指令的才会把对应框架发到浏览器。
水合指令
| 指令 | 时机 |
|---|---|
client:load | 立即水合 |
client:idle | 浏览器空闲时 |
client:visible | 进入视口时 |
client:media | 匹配媒体查询时 |
本主题的简繁切换、调色板切换、打字机、时钟都是原生
<script>,没有引入任何框架运行时——所以 LCP 能稳在 0.4s 左右。
小结
能不水合就不水合,这才是终端哲学:只加载你真正需要的东西。喵~