前端知库

Astro Islands 架构怎样减少客户端 JavaScript?

解释静态 HTML、交互岛和客户端加载指令的关系,理解内容站点与交互组件的边界。

参考答案

Islands 架构让页面主体先输出 HTML,只有需要交互的组件作为独立“岛”加载客户端 JavaScript。这样内容站点可以减少初始脚本,但交互组件仍需明确 hydration 时机和依赖。

不同客户端指令表达不同加载策略,例如页面加载、可见、空闲或媒体条件。指令不是性能保证:组件本身的大小、第三方依赖、网络和交互路径仍决定实际收益。

岛之间共享状态、表单提交和路由切换要有明确通信方式。把所有页面都变成客户端岛会失去架构收益;把需要即时交互的部分全部静态化又会降低体验。