Astro 隆重登场：交付更少 JavaScript

作者
Fred Schott
Nate Moore

构建更快的网站有一个简单的秘诀——只需交付更少内容。

不幸的是，现代 Web 开发一直在朝着相反的方向发展——追求更多。更多的 JavaScript、更多的功能、更多的活动部件，最终需要更多的复杂性来确保所有内容平稳运行。

今天，我很高兴公开分享 Astro：一种新型的静态站点构建器，它以现代化的开发体验提供闪电般的性能。为了设计 Astro，我们借鉴了我们最喜欢工具的最佳部分，然后添加了一些我们自己的创新，包括

  • 自带框架 (BYOF)：使用 React、Svelte、Vue、Preact、Web Components，或者仅仅是纯粹的 HTML + JavaScript 构建您的站点。
  • 100% 静态 HTML，无 JS：Astro 默认将您的整个页面渲染为静态 HTML，从最终构建中移除所有 JavaScript。
  • 按需组件：需要一些 JS 吗？Astro 可以在交互式组件在页面上可见时自动对其进行“注水”。如果用户从未看到它，他们就永远不会加载它。
  • 功能齐全：Astro 支持 TypeScript、Scoped CSS、CSS Modules、Sass、Tailwind、Markdown、MDX 以及您喜欢的任何 npm 包。
  • SEO 优化：自动站点地图、RSS 订阅源、分页和集合功能消除了 SEO 和内容联合发布的痛点。

这篇博文标志着 Astro 的首次公开测试版发布。在当前早期阶段，仍然可能存在缺失功能和错误。距离官方 1.0 版本发布还有几个月的时间，但目前已有几个使用 Astro 构建的快速网站投入生产环境。随着我们今年晚些时候发布 v1.0 版本，我们期待您的早期反馈。

开始入门

在 Astro 中启动新项目很容易

# create your project
mkdir new-project-directory
cd new-project-directory
npm init astro


# install your dependencies
npm install


# start the dev server and open your browser
npm run dev

Astro 如何工作

Astro 的工作方式与静态站点生成器非常相似。如果您使用过 Eleventy、Hugo 或 Jekyll（甚至是像 Rails、Laravel 或 Django 这样的服务器端 Web 框架），那么您会对 Astro 感到得心应手。

在 Astro 中，您可以使用您喜欢的 JavaScript Web 框架（React、Svelte、Vue 等）的 UI 组件来构建您的网站。Astro 在构建过程中将您的整个站点渲染为静态 HTML。结果是一个完全静态的网站，最终页面中移除了所有 JavaScript。无需庞大的 JavaScript 应用程序，只有静态 HTML，无论您使用多少 UI 组件来生成它，它都能在浏览器中尽可能快地加载。

当然，有时客户端 JavaScript 是不可避免的。图片轮播、购物车和自动完成搜索栏只是需要一些 JavaScript 在浏览器中运行的几个例子。这就是 Astro 真正闪耀的地方：当一个组件需要一些 JavaScript 时，Astro 只加载该组件（及其任何依赖项）。您网站的其余部分仍然是静态的、轻量级的 HTML。

在其他全栈 Web 框架中，如果不加载整个页面的 JavaScript，这种组件级别的优化是不可能实现的，这会延迟交互性。在 Astro 中，这种部分注水功能内置于工具本身。

您甚至可以使用 :visible 修饰符自动延迟组件，使其仅在页面上可见时才加载。

这种新的 Web 架构方法被称为群岛架构。我们并未创造这个术语，但 Astro 可能已经完善了这项技术。我们相信，HTML 优先、按需使用 JavaScript 的方法是大多数内容型网站的最佳解决方案。

拥抱成功之坑

一个设计良好的系统使得做正确的事变得容易，而做错的事则令人不悦（但并非不可能）

Jeff Atwood，

跌入成功之坑

性能不佳常常被归咎于开发者的失败，但我们对此不敢苟同。在许多情况下，性能不佳是工具的失败。构建一个缓慢的网站应该很困难。

Astro 的主要设计原则是引导开发者进入 Rico Mariani 所称的“成功之坑”。我们的目标是使每个站点“默认快速”，同时提供熟悉且现代的开发体验。

通过默认将您的站点构建为静态 HTML，Astro 使构建一个缓慢的站点变得困难（但绝非不可能 😉）。

长期可持续性

Astro 由 Snowpack 和 Skypack 背后的开源开发者团队构建，并得到了社区的额外贡献。

Astro 过去、现在和将来都将免费。它是一个根据 MIT 许可证发布的开源项目。

我们深切关注为开源软件构建一个更可持续的未来。同时，我们需要长期支持 Astro 的开发。这需要资金（仅靠捐赠是不够的）。

我们受到 Tailwind、Rome、Remix、Ionic 等项目的早期成功所启发，它们正在开源之上尝试实现长期财务可持续性。在未来一年，我们将探索如何创建一个可持续的业务，以在未来多年内支持 100% 免费的开源 Astro。

如果您的公司和我们一样对 Astro 感到兴奋，我们很乐意听取您的意见。