性能优化与部署

性能优化要点

• 零 JS 首屏：不需要交互的内容保持纯 HTML。
• 按需水合：为交互组件添加合适的 client:* 指令（idle/visible/media），减少主线程阻塞。
• 拆分岛屿：把大组件拆成多个小岛，降低水合成本。
• 资源指纹：CSS/JS/图片文件指纹化，便于长缓存。
• 图片优化：使用 <Image />/@astrojs/image 生成多尺寸 WebP，懒加载。
• 预取与分块：路由预取、代码分块，避免一次加载过大。

构建与体积

• 检查 dist/ 产物，关注 JS 体积；移除未用客户端指令的组件。
• 使用 vite-bundle-visualizer 等工具分析依赖。

部署策略

• 静态托管：Cloudflare Pages/Netlify/Vercel 静态产物即可。
• 边缘网络：将静态资源放在 CDN/边缘，减少延迟。
• SSR/Functions：仅对需要动态的路由开启，尽量保持无状态，利用缓存。

监控与回归

• 首屏指标：LCP、CLS、FID/INP；用 Lighthouse/Pagespeed 监控。
• 真实用户监控（RUM）：收集性能与错误。
• 构建后自动化链接检查、无障碍扫描。***