大家好，我是Echa。

好消息，就在上周（2023年3月8号），Astro 官方正式发布 v2.1 版本。距离 Astro 2.0正式发布 时间（2023年1月24号），只有短短40天时间。Astro 研发团队为了抢夺Web 前端 这块蛋糕，也是费劲了心思，跟时间赛跑。从Astro 研发团队 Github 官方云仓库提交版本上看，真的是日日夜夜都在更新迭代，优化程序。同时也给咱们开发者带来了很多方便。小编给他们点32个赞。

也是非常巧的事情， Astro 研发团队成员 Fred Schott 大佬最近在官方Blog 中发文总结2023年Web 框架性能报告文章，有兴趣的小伙伴可以看看这份小编整理的：最新的 web 框架性能报告出炉 该篇文章分列举了六种现代流行基于 JavaScript 的 Web 框架：Astro、Gatsby、Next.js、Nuxt、Remix和SvelteKit，进行多项指标的评测。结果发现Astro 各方面指标都是领先，也是Web 框架不二之选之一。小编强力推荐。下面小编来详细介绍 Astro 的独特之处。

全文大纲

1. Astro 介绍
2. 为什么选择Astro?
3. Astro 其他特性
4. Astro v2.1 发布哪些内容

Astro 介绍

官方网址：https://astro.build/

Github：https://github.com/withastro/astro

Astro 是集多功能于一体的 Web 框架，用于构建快速、以内容为中心的网站。具有出众的开发者体验 (Developer Experience)。据介绍，虽然 Astro 从诞生到今天只有 21 个月，但其Github仓库的 star 数已超过 28.3k，并且在全球拥有超过 30w名用户。目前，Astro 文档已被翻译成 10种不同的语言 —— 包括中文，并且在 Best of JS 正式公布 2022 年 JavaScript 明星项目最受欢迎的榜单排名第7位。有兴趣的请看小编整理的这篇：2022年最受欢迎的JavaScript项目榜单出炉

Astro 主要特性

• 组件群岛: 用于构建更快网站的新 web 架构。
• 服务器优先的 API 设计: 从用户设备上去除高成本的 Hydration。
• 默认零 JS: 没有 JavaScript 运行时开销来减慢你的速度。
• 边缘就绪: 在任何地方部署，甚至像 Deno 或 Cloudflare 这样的全球边缘运行时。
• 可定制: Tailwind, MDX 和 100 多个其他集成可供选择。
• 不依赖特定 UI: 支持 React, Preact, Svelte, Vue, Solid, Lit 等等。

具体如下图：

为什么选择Astro?

为什么选择 Astro 而不是其他的Web框架？以下的五个核心设计原则有助于解释我们为什么要构建 Astro，它需要解决的问题以及为什么 Astro 可能是您的项目或团队的最佳选择。

1. 以内容为中心 ：Astro 专为内容丰富的网站而设计。
2. 服务器优先 ：网站在服务器上渲染 HTML 时运行速度更快。
3. 默认快速 ：在 Astro 中构建缓慢的网站是不可能的。
4. 易于使用 ：您不需要成为专家即可使用 Astro 构建某些内容。
5. 功能齐全且灵活 ：超100多种 Astro 集成可供选择。

以内容为中心

Astro 皆为构建内容丰富的网站。 这包括大多数营销网站、出版网站、文档网站、博客、个人作品集和一些电子商务网站。

服务器优先

Astro 尽可能利用服务器渲染而不是客户端渲染。 这与传统服务器端框架（PHP、WordPress、Laravel、Ruby on Rails等）使用的方法相同，您不需要学习第二种服务端语言。 Astro 仍然使用 HTML、CSS和JavaScript(或TypeScript)。

这种方法与其他现代 JavaScript Web框架 形成鲜明对比，如 Next.JS、SvelteKit、Nuxt、Remix 等。这些框架需要整个网站的客户端和服务器端渲染，以解决性能问题，这种方法被称为单页应用程序(SPA)， 与 Astro 的多页应用程序（MPA） 方式形成鲜明对比。

默认快速

良好的性能很重要，对于以内容为中心的网站尤其至关重要。事实证明，糟糕的表现会让您失去参与度、转化率和金钱。例如：

• 每快 100ms → 转化率增加 1% (Mobify, 收入 +$380,000/年)
• 每快 50% → 销售额增加 12% (AutoAnything)
• 每快 20% → 转换率增加 10% (Furniture Village)
• 每快 40% → 注册率增加 15% (Pinterest)
• 转换速度提高 850ms → 转化率增加 7% (COOK)
• 每慢1秒 → 减少 10% 的用户 (BBC)

在许多 Web框架 中，在开发过程中很容易构建一个看起来很棒的网站，但是在部署后加载速度会非常慢。JavaScript 通常是罪魁祸首，因为用户的手机和低功耗设备很少能与开发人员的电脑速度相匹配。

Astro 的魔力在于它如何将上述两个值（内容焦点于服务器优先的MPA架构）相结合，以做出权衡并提供其他框架无法实现的功能。结果是每个网站都有开箱即用令人惊叹的Web性能。我们的目标：使用 Astro 构建几乎不可能缓慢的网站。

与使用最受欢迎的 React Web框架 构建相同的网站进行比较，Astro 网站的加载速度快40%，JavaScript减少90% 。

易于使用

Astro的目标是让每位Web开发人员都可以访问。 Astro 被设计成熟悉和平易近人的感觉，无论技能水平或过去的Web开发经验如何。

我们首先确保您可以使用您已经知道的任何喜欢的 UI 组件语言。在 Astro 中创建新的 UI 组件时都支持 React、Preact、Svelte、Vue、Solid、Lit 和其他一些组件。

功能齐全且灵活

Astro 是集多功能于一体的 Web 框架，提供了构建网站所需的一切 Astro 包括组件语法、基于文件的路由、资产处理、构建处理、捆绑、优化、数据获取等。您可以在不超过 Astro 核心功能集 的情况下构建出色的网站。

如果您需要更多的控制，你可以通过 React, Svelte, Vue, Tailwind CSS, MDX, image optimizations等100多个集成 扩展 Astro 只需要一个命令 即可连接您喜欢的CMS 或 部署到您喜欢的服务器

Astro 与 UI 无关，这意味着您可以自带 UI 框架（BYOF）。React、Preact、Solid 、Svelte、Vue 和 Lit 都在 Astro 中得到官方支持。您甚至可以在同一页面上混合和匹配不同的框架，使未来的迁移更容易，并防止项目锁定到单个框架。

Astro 其他特性

Astro 采用了独特的 Island 组件架构，团队称这是一种用于构建更快网站的新型 Web 架构。与单页应用程序不同，Astro 的组件不会被捆绑到一起 JavaScript 包中。相反，每个组件都被视为一个独立的小型应用程序，与所有其他组件隔离存在。

Astro 其他特性：

• 自带组件框架：Astro 为 React、Vue、Svelte 和 Tailwind CSS 等前端工具提供一级支持。通过 astro add 命令即可添加使用
• 支持静态页面生成 (SSG) 和服务器端渲染 (SSR)，可以按需渲染内容
• 开发者体验出众：Astro 支持所有喜爱的开发者工具和功能，如 TypeScript、NPM 包、Scoped CSS、CSS Modules、Sass、Tailwind、Markdown、MDX
• 按需组件：Astro 支持通过水化组件按需加载 JavaScript。因此，如果该特定组件不可见，它不会加载相关的 JavaScript
• 100% 静态 HTML，无 JavaScript 运行时环境：当构建 Astro 时，它将删除所有 JavaScript，并将整个页面渲染为静态 HTML 页面
• SEO 友好：使用 Astro，可以启用自动网站地图、RSS 订阅、分页和收藏
• 基于文件的路由：就像 Next.js 一样，Astro 有一个基于文件的路由机制，所有在 /pages 中的东西 Astro 都会将目录转化为路由

Astro v2.1 发布哪些内容

1. 内置图像支持：（实践中）自动图像优化正在Astro核心落地。

import { image, defineCollection, z } from "astro:content"

const blogCollection = defineCollection({
	schema: z.object({
		title: z.string(),
		cover: image(),
	}),
})

export const collections = {
	blog: blogCollection,
}

cover: image().refine((img) => img.width === 800 && img.height === 600, {
	message: "Cover needs to be 800x600 pixels!",
})

2. Mark doc集成：（实践中）Stripe的一种新内容格式，针对大型项目进行了优化。

与Astro v2.1版本一起发布的还有一个新的实验性Markdoc集成。通过在项目目录中运行。 npx-astro-add-markdoc，您可以立即将@astrojs/markdoc添加到项目中。

3. astro check --watch：在开发期间使用此标志键入检查.astro文件。

astro check是一个内置的astro CLI命令，它在项目.astro文件上运行TypeScript类型检查。它通常用于在合并更改或部署站点之前捕获CI中的错误和类型错误。

//package.json

{
	"scripts": {
		"dev": "astro check --watch & astro dev"
	}
}

4. 动态路由的推断类型：获取参数和属性，而不必两次定义类型。

Astro页面中的getStaticPaths（）导出用于定义应为SSG模式下的动态路由构建哪些页面。对于每个页面，都返回一个params和props属性。

在Astro 2.1中，我们添加了两个新的助手来推断这些类型，并在模板中使用这些值时提供类型检查。

给定以下getStaticPaths（）函数：

---
// Example: src/pages/blog/[slug].astro
export async function getStaticPaths() {
	const posts = await getCollection("blog")
	return posts.map((post) => {
		return {
			params: { slug: post.slug },
			props: { draft: post.data.draft, title: post.data.title },
		}
	})
}
---

现在，您可以使用新的 InferGetStaticParamsType 和 InferGetStatcPropsType帮助器类型来获取参数和props值的类型定义，而无需手动定义它们：

import { InferGetStaticParamsType, InferGetStaticPropsType } from "astro"
export async function getStaticPaths() {
	/* ... */
}

type Params = InferGetStaticParamsType<typeof getStaticPaths>
type Props = InferGetStaticPropsType<typeof getStaticPaths>
const { slug } = Astro.params
//  ^? { slug: string; }
const { title } = Astro.props
//  ^? { draft: boolean; title: string; }

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。