Astro 开发实用技巧集合

整理了一些 Astro 开发中的实用技巧：

🚀 开发效率技巧

1. 使用 Astro DevTools

npm install @astrojs/dev-toolbar

开发时可以直接在浏览器中查看组件结构和性能信息。

2. 快速重启开发服务器 按 Ctrl + C 然后 npm run dev，或者使用 rs 命令（如果支持）。

3. 组件热重载技巧 修改 .astro 文件时，页面会自动刷新。但修改 astro.config.mjs 需要手动重启。

🎯 调试技巧

检查构建输出：

npm run build -- --verbose

查看生成的 HTML： 构建后检查 dist/ 目录，看看实际生成的静态文件。

💡 性能优化小贴士

• 使用 client:idle 而不是 client:load 来延迟非关键组件
• 图片使用 loading="lazy" 属性
• 大型组件考虑代码分割

今天的收获：小细节决定大性能！ ⚡