~/终端猫屋.theme
小耗子@住在猫窝的耗子:~/posts—cat zero-js-by-default-how-astro-islands-work.md
3
喵娘@终端猫屋:~/posts$ cat zero-js-by-default-how-astro-islands-work.md # 阅读文章

默认零 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 左右。

小结

能不水合就不水合,这才是终端哲学:只加载你真正需要的东西。喵~

← 返回列表

DARK
终端猫屋
▸ ~/posts/zero-js-by-default-how-astro-islands-work.md
简体中文
utf-8
unix
astro 5.x
00:00:00