跳转到内容
Starlight

环保文档

网络行业对气候影响的估计范围从2%到全球碳排放量的4%，大致相当于航空业的排放量。 计算网站生态影响的因素很多，但本指南包含了一些减少文档站点环境足迹的技巧。

好消息是，选择 Starlight 是一个很好的开始。 根据网站碳计算器的数据，本站点比 99% 的网页更环保，每个页面访问产生 0.01g 的 CO₂。

页面大小

网页传输的数据越多，它所需的能源资源就越多。 根据来自 HTTP 存档的数据，2023 年 4 月，中位数网页需要用户下载超过 2,000 KB。

Starlight 构建的页面尽可能轻量。 例如，在第一次访问时，用户将下载少于 50 KB 的压缩数据，仅为 HTTP 存档中位数的 2.5%。 通过良好的缓存策略，后续导航可以下载少至 10 KB。

图片

虽然 Starlight 提供了一个很好的基线，但是你添加到文档页面的图片可能会快速增加页面的大小。 Starlight 使用 Astro 的 优化的资源支持 来优化 Markdown 和 MDX 文件中的本地图片。

UI 组件

使用 React 或 Vue 等 UI 框架构建的组件可以轻松地向页面添加大量 JavaScript。 因为 Starlight 是基于 Astro 构建的，所以这样的组件默认情况下不会加载任何客户端 JavaScript，这要归功于 Astro 岛屿。

缓存

缓存用于控制浏览器存储和重用已下载数据的时间。 良好的缓存策略确保用户在内容更改时尽快获得新内容，但也避免了在内容未更改时反复下载相同的内容。

最常见的配置缓存的方法是使用 Cache-Control HTTP headers。 使用 Starlight 时，你可以为 /_astro/ 目录中的所有内容设置长时间缓存。 该目录包含可以安全永久缓存的 CSS、JavaScript 和其他捆绑的资源，从而减少不必要的下载：

Cache-Control: public, max-age=604800, immutable

如何配置缓存取决于你的 Web 主机。例如，Vercel 会自动为你应用这种缓存策略，而 Netlify 可以通过在项目中添加 public/_headers 文件来为 Netlify 设置自定义 headers：

/_astro/*
  Cache-Control: public
  Cache-Control: max-age=604800
  Cache-Control: immutable

功耗

网页的制作方式会影响其在用户设备上的运行功率。 通过使用最少的 JavaScript，Starlight 减少了用户手机、平板电脑或电脑加载和呈现网页所需的处理能力。

当添加诸如分析跟踪脚本或 JavaScript 重型内容（如视频嵌入）之类的功能时，请注意这些功能会增加页面的功耗。 如果你需要分析，请考虑选择像 Cabin、Fathom 或 Plausible 这样的轻量级选项。 等待用户交互时加载视频可以改善 YouTube 和 Vimeo 视频等嵌入。 astro-embed 等包可以帮助常见的服务。

托管

网页托管在哪里会对你的文档站点的环保程度产生很大的影响。 数据中心和服务器农场可能会对环境产生很大的影响，包括高耗电量和大量使用水资源。

选择使用可再生能源的主机将意味着你的站点的碳排放量更低。绿色网络目录是一个可以帮助你找到主机公司的工具。

比较

好奇和其他文档框架相比如何？ 下面使用 Website Carbon Calculator 的测试比较了使用不同工具构建的类似页面。

框架每页访问量产生 CO₂
Starlight0.01g
VitePress0.05g
Docus0.05g
Sphinx0.07g
MkDocs0.10g
Nextra0.11g
docsify0.11g
Docusaurus0.24g
Read the Docs0.24g
GitBook0.71g

数据收集于 2023 年 5 月 14 日。点击链接查看最新数据。

更多资源

工具

文章和演讲