用Astro建造燃烧的网站

Astro通过交付较少的JavaScript立即加载站点。 1。岛屿建筑：仅保湿互动组件，其余部分作为静态HTML。 2。默认情况下零javascript：.ASTRO文件编译为纯HTML，从而减少运行时开销。 3。内置性能优化：包括代码分配，图像优化，CSS缩小和范围CSS。 4。理想的内容是博客和文档等内容丰富的网站，其中快速LCP，Low FID以及最少的JS和静态输出产生了出色的SEO。 Astro可以使用熟悉的工具实现高性能，确保快速加载，较低的带宽，更好的SEO和更快乐的用户，而无需牺牲现代开发工作流程。

Astro并不是要使您的网站看起来很浮华，而是要立即使其负载。如果您曾经放弃过一个网站，因为加载了太长时间，那么您并不孤单。那就是Astro的光芒。这不仅是另一个前端框架；这是关于如何在2024年及以后建立网站的重新考虑。

核心想法？默认情况下提供更少的JavaScript。大多数现代框架将浏览器的代码过多。 Astro将其翻转。它将您的整个网站预先介绍到构建时间静态HTML，因此用户可以快速获得内容，而无需等待JavaScript启动。

这是Astro使网站迅速燃烧的方式以及为什么重要的原因。

✅1。岛屿建筑：仅补充您需要的东西

传统的水疗中心（单页应用程序）将所有组件作为交互式JavaScript运送，即使只需要少数组件。 Astro使用“岛屿建筑” ，这是一个由Marko和Astro等框架推广的概念。

这意味着什么？

• 您的页面主要是静态HTML。
• 仅交互式组件（例如购物车，暗模式切换或评论部分）才是互动性的“岛屿”。
• Astro仅保湿那些岛屿，其余的作为轻巧的非JS含量。

？例子：
您的博客底部有一个评论小部件。使用React或Vue，整个页面等待JS加载和保湿，甚至标题和图像。使用Astro，该文章立即以HTML的形式加载。如果需要/在需要时，只有评论才能保湿。

这大大减少了JavaScript有效载荷 - 通常减少80％或更多。

✅2。默认情况下零JavaScript

Astro组件（ .astro文件）在运行时是纯HTML。即使您在其中使用React或Vue语法，它们也会在构建过程中将其编译为静态HTML。

您仍然可以使用自己喜欢的UI库（React，Svelte，Vue等），但仅在需要的地方。即使那样，除非您明确要求进行互动，否则Astro将框架剥离开销。

这意味着：

• 除非需要，否则在浏览器中没有虚拟DOM。
• 没有不必要的事件听众或重新租户。
• 较小的捆绑包，更快的解析，更好的核心网络活力。

这就像与Jekyll或Hugo建造一样，但使用现代组件工具。

✅3。内置性能优化

Astro不仅依靠建筑。它带有烤制的性能：

• 自动代码拆分：每个页面和组件都是智能拆分的。
• 图像优化：使用<image></image>组件进行懒惰的响应式图像。
• CSS的降低和重复数据删除：页面上没有重复的样式。
• 默认情况下，CSS范围为：没有CSS泄漏，没有全局膨胀。
• 在开发过程中的变化快速刷新：变化会立即反映。

而且，由于Astro输出静态文件，因此您可以在任何地方部署任何地方（Netlify，vercel，github页面），并具有即时加载和CDN缓存。

✅4。非常适合内容丰富的网站（博客，文档，营销）

如果您的网站是90％的内容和10％的互动性（例如大多数博客，文档，着陆页），Astro非常适合。

您为内容编写Markdown或MDX，使用布局和组件以保持一致性，并仅在重要的情况下撒上交互性。

将其与next.js或Gatsby网站进行比较，在这里您可能仍会为简单的博客文章运送完整的React应用程序。

与Astro：

• LCP（最大的内容涂料）是近乎现行的。
• FID（第一个输入延迟）可以忽略不计，因为很少有JS可以阻止交互。
• seo？优秀 - 清洁html，快速索引。

底线

Astro并没有试图替换您的React App仪表板。但是对于营销网站，博客，文档，投资组合和电子商务登陆页面，它是当今运送高性能网站的最快方法之一。

你得到：

• 即时加载
• 较低的带宽用法
• 更好的SEO
• 更快乐的用户

您仍然可以使用自己喜欢的工具 - 只是没有膨胀的情况。

这不是魔术。这只是明智的默认值。

基本上，如果您的网站不需要是网络应用程序，请不要像一个网络应用程序一样构建它。 Astro可以帮助您记住这一点。

以上是用Astro建造燃烧的网站的详细内容。更多信息请关注PHP中文网其他相关文章！