Astro如何实现最小化JavaScript——笔记 Astro如何减少JavaScript捆绑的大小 Astro是一个

Astro是一个现代静态网站建设者，它允许你用更少的JavaScript来提供应用程序。作为一个开发者，我发现这非常有趣，因为它在不影响应用功能的情况下减少了捆绑的大小。

然而，Astro发布才几天，我就想试一试。因此，在这篇文章中，我将探讨它的核心功能，并通过相关的例子解释它是如何减少包的大小的。

JavaScript框架和库有助于加快现代网络开发的速度。

然而，每当我们安装一个新的库时，我们项目的包的大小就会增加。最终，它会影响到应用程序的加载时间，造成性能问题。

HTTP Archive Org的下图向你展示了，一般来说，JavaScript捆绑大小在这些年里的增长情况。

HTTP Archive Org（来源）--页面所请求的所有外部脚本的传输大小千字节之和

作为一种解决方案，开发人员开始转向诸如 懒惰加载、服务器端渲染和混合渲染 等技术。但是，这些技术都有自己的挑战，有些还处于预览阶段（如React悬念+懒惰）。

这就是Astro出现的地方。它提供了一个可行的、直接的解决方案来减少JavaScript包的大小。

所以，让我们看看Astro是如何工作的。

Astro使用一种叫做部分水合的技术来减少包的大小。

它将必要的JavaScript加载到所需的组件（包括依赖关系），同时保持页面的其余部分静态。

有几种类型的水合技术，你可以使用。

**load -**这种水合技术将在页面加载时对组件进行水合。
闲置**--**一旦主线程空闲，就对组件进行水化。这使用了 requestIdleCallback() 浏览器的API，它在浏览器的空闲期排队调用一个函数。
**visible -**当元素进入视口时，立即对组件进行水合。
**media -**这个Hydration在浏览器与给定的媒体查询相匹配时发生。这使用了 matchMedia().这对那些只应在移动或桌面设备上显示的元素很有用。

所有这些功能都被Astro使用的独特架构所利用，称为岛屿架构。

岛式架构在服务器上渲染HTML页面，并在高动态区域周围注入占位符。占位符包含服务器渲染的HTML输出，对应于小部件，这些区域可以在客户端被水化为小部件。

岛式架构

与单页应用程序相比，岛式架构带来了多种好处，比如。

Astro有一些整洁的功能，同时增加了一些创新，以方便采用。其中一些是。

自带框架（BYOF）--使用Astro开发时，你不需要学习新的语法或编码实践。Astro支持React、Svelte、Vue、Preact、Solid、Web组件、普通HTML+JavaScript。
功能齐全--Astro支持所有喜爱的开发者工具和功能，如TypeScript、NPM包、Scoped CSS、CSS Modules、Sass、Tailwind、Markdown、MDX。
按需组件--Astro允许你通过水化组件按需加载JavaScript。因此，如果该特定组件不可见，它不会加载相关的JavaScript。
100%静态HTML，没有JS- 当构建Astro时，它将删除所有的JavaScript，并将整个页面呈现为静态HTML页面。
**SEO -**使用Astro，我们可以启用自动网站地图、RSS订阅、分页和收藏。
基于文件的路由- 就像Nextjs一样，Astro有一个基于文件的路由机制。，所有在/pages中的东西Astro都会将目录转化为路由。