静态站点性能优化实践

静态站点的优势在于速度和可靠性，但优化并非自动完成。以下内容记录了从构建策略到资源加载的实际调整过程，适用于使用 Astro、Vite 或类似工具的项目。

理解构建输出

生产构建会生成纯静态文件，这意味着所有优化都发生在构建阶段。了解 dist 目录的内容是第一步：HTML 页面、CSS bundle、JavaScript chunk、以及生成的搜索索引。

1
bun run build
2
ls -la dist/

重点关注文件大小分布和重复资源。如果多个页面加载相同的样式或脚本，应该考虑提取为共享模块。

CSS 策略

Tailwind CSS 4 通过 Vite 集成后，未使用的工具类会在构建时自动移除。但需要注意以下事项：

• 确保所有使用的类名在模板中实际出现
• 动态生成的类名需要写入 content.config.ts
• 自定义色盘变量应放在独立的样式文件中便于维护

1
:root {
2
  --accent: #6b7d70;
3
  --paper-bg: #fdfdf9;
4
}

图片优化流程

Astro 提供 SmartImage 组件自动处理响应式和懒加载。对于需要更多控制的场景：

1. 使用 sharp 在构建前压缩图片
2. 为高分辨率屏幕提供 WebP/AVIF 格式
3. 设置合理的 loading="lazy" 和 decoding="async"

1
---
2
import SmartImage from '../../components/SmartImage.astro';
3
---
4
<SmartImage
5
  src="/images/hero.webp"
6
  alt="Performance optimization diagram"
7
  width={1200}
8
  height={630}
9
/>

搜索索引生成

Pagefind 在构建完成后运行，为 dist 目录中的内容创建全文索引。如果修改了文章内容但搜索没有更新：

1. 先完成 Astro 生产构建
2. 确认 dist/pagefind/ 目录存在
3. 重新运行 Pagefind 或检查 CI 流程是否正确触发

开发环境中如果还没有生产索引，搜索弹层会显示索引不可用提示。

关键指标参考

静态站点通常能自然满足这些指标，前提是避免加载不必要的 JavaScript 和过大的图片资源。