如何使用 Astro 构建高性能静态网站

什么是 Astro

Astro 是一个现代化的静态网站生成器（SSG），它采用了一种独特的架构——岛屿架构（Islands Architecture）。这种架构允许我们构建以内容为中心的网站，同时支持在需要的地方添加交互式组件。

Astro 的核心优势

1. 零 JavaScript 默认

Astro 的核心哲学是”默认零 JavaScript”。它会尽可能地将页面渲染为静态 HTML，只在真正需要交互性的地方才加载 JavaScript。

---
const data = await fetch('https://api.example.com/data').then(r => r.json());
---
<div>
  <h1>{data.title}</h1>
  <p>{data.description}</p>
</div>

上面的代码会被编译成纯静态的 HTML，无需任何 JavaScript。

2. 岛屿架构

当需要交互性时，Astro 允许我们在静态页面中嵌入动态的”岛屿”：

---
import MyInteractiveComponent from './MyInteractiveComponent.jsx';
---
<!-- 这部分是静态的 -->
<header>Static Header</header>

<!-- 这个组件会作为"岛屿"加载 -->
<MyInteractiveComponent />

<!-- 这部分又是静态的 -->
<footer>Static Footer</footer>

3. 框架无关

Astro 支持多种前端框架，包括 React、Vue、Svelte 等。你可以在同一个项目中混用不同的框架：

---
import ReactCounter from './ReactCounter.jsx';
import VueCounter from './VueCounter.vue';
import SvelteCounter from './SvelteCounter.svelte';
---
<ReactCounter count={5} />
<VueCounter count={5} />
<SvelteCounter count={5} />

4. 内容优先

Astro 非常适合构建以内容为中心的网站，如博客、文档站、营销页面等。它提供了强大的 Content Collections 功能：

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

性能优化技巧

1. 图片优化

Astro 内置了图片优化功能：

import { Image } from 'astro:assets';

<Image
  src="./hero.jpg"
  alt="Hero image"
  width={1200}
  height={630}
  format="webp"
  loading="lazy"
/>

2. 代码分割

Astro 会自动进行代码分割，只在需要时加载对应的代码：

---
// 只在页面真正使用时才加载
const HeavyComponent = (await import('./HeavyComponent')).default;
---
<HeavyComponent />

3. 预加载关键资源

使用 link 标签预加载关键资源：

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" />

实战示例

让我们创建一个简单的博客文章列表：

---
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
const sortedPosts = posts.sort((a, b) =>
  b.data.date.valueOf() - a.data.date.valueOf()
);
---
<ul>
  {sortedPosts.map((post) => (
    <li>
      <a href={`/blog/${post.slug}/`}>
        <h2>{post.data.title}</h2>
        <time>{post.data.date.toLocaleDateString()}</time>
      </a>
    </li>
  ))}
</ul>

部署

Astro 构建的是纯静态文件，可以部署到任何静态托管服务：

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

总结

Astro 是一个强大而灵活的静态网站生成器，它通过岛屿架构和零 JavaScript 的理念，让我们能够构建出高性能、易维护的网站。

无论你是要构建博客、文档站还是营销页面，Astro 都是一个值得考虑的选择。

开始探索 Astro 的更多可能性吧！