当我第一次听说我可以编写 React 并利用这个很酷的 GraphQL 新玩意儿，同时还能输出不须要 JavaScript 的静态页面时，我很想考试测验它一下。我是这么想的：“这听起来像是渐进增强，但用不着什么投入”。不幸的是，就像大多数听起来过于美好的事情一样，经由一些调查我创造它便是个坑。用户首次访问 Gatsby 网站时会发生这些事情：
用户要求一个页面。做事器将静态天生的 HTML 文档发送到用户的浏览器，然后浏览器开始渲染页面。HTML 文档到达后，JavaScript 包（包括 React 库和渲染页面所需的其他 JavaScript）开始在后台下载、解析和编译。JavaScript 已准备就绪，可以运行——全体 DOM 通过 React 组件“被水化”（hydrated）。这里就有些不对劲——Gatsby 须要你以 React 组件的形式再加载一次页面；在完成多出来的这一步之前，所有须要 JavaScript 的元素（例如按钮、菜单、自定义输入）实际上都不能交互。
哪怕你的网站没有任何互动元素（链接除外，纵然没有 Gatsby，它们也无需 JavaScript 即可事情），你的用户也必须下载这部分 JavaScript，仅仅是为了将你的网站变成单页运用程序（SPA）；SPA 是有自己的缺陷的，我们稍后再提。
这种多出来的操作看来是违背我转向 SSG 的初衷（提高页面速率）的。华美的 Gatsby 网站在 2,000 美元的 MacBook 上可能很快，但对付利用 3G 连接和廉价智好手机的用户来说，它显示是能显示出来，但是没有相应；用户等待加载 JavaScript 的过程要持续 15 秒。电池和数据流量也得随着往下掉了。
如果浏览器须要解析 296kb 的 JavaScript 代码才能显示出博客文章的列表，这就不是什么"渐进增强”，而是用错了工具。从网站 /Web 运用的大致差异来看，React 是用于构建 Web 运用的，这种运用须要有响运用户输入或实时获取数据的交互式 UI；而博客只是一个网站而已。
单页运用程序中的可访问性单页运用程序这种网站放弃了传统的 Web 导航方法，即通过加载新的 HTML 文档来加载新内容；相反，它利用 AJAX 和 History API 之类的 JavaScript 特性来切换到新内容上，而不会触发页面加载。它的目标是提高感知的性能，并使网站看起来更像“原生”运用（从运用商店下载的那种）。不再须要整页重新加载的问题在于，浏览器和赞助技能将页面加载用作触发某些有用行为的旗子暗记，包括宣告新页面的标题或将键盘焦点重置到文档的开头。
如果你在开拓关注可访问性的单页运用程序，那么你可能会试着利用 JavaScript 来仿照浏览器的行为。Gatsby 试图通过包含一个 RouteAnnouncer 组件来为你办理这个问题。它利用一个 ARIA live region 来宣告页面的 title 或 h1，以对利用屏幕阅读器软件的用户提示页面跳转行为。但这种方法也存在问题：它在配置和本地化方面仍旧存在很多未办理的 issue。
我们已经看到，单页运用程序在导航方面存在固有的可访问性问题，但要把稳的是，利用前端框架也会在其他方面带来可访问性问题。在 2020 年 2 月对 100 万个首页的调查中，WebAIM 创造利用 React 的网页的可访问性缺点比均匀水平高 5.7％；而利用 Vue 的网页则赶过 25％。这并不一定意味着框架一定会导致这些缺点，但是更多的 JavaScript 与更差的可访问性之间存在很强的干系性。
博客真的须要 JavaScript 吗？很有可能，你构建的第一个网页的性能要比之后构建的许多页面都要好得多——它由一个 HTML 文件和一些 CSS 组成，大概还有一些未优化的图像，但它们并不会阻挡页面加载。如果你也有我这样的经历，那么开始添加 JavaScript 的那一刻，你的网页性能就开始急剧低落了。并非所有字节都是一样的：与同等大小的 JavaScript 文件解析、编译和实行所需的韶光比较，图像解码和渲染到屏幕所需的韶光要少得多。
JavaScript 是一种强大的措辞，可以完成一些令人难以置信的事情，但是在开拓中你很随意马虎过早开始利用它，实在本来用 HTML 和 CSS 就够了。该当看看最小功能原则：在你充分利用功能较弱的措辞（HTML）之前，请不要利用功能更强大的措辞（JavaScript）。在我看来，将博客变成 JavaScript 单页运用程序会带来不必要的繁芜性。
这篇文章并不是要批驳 Gatsby 而写的。它的背后有一些聪明的头脑，他们已经承认了本文中提到的许多问题，并试图办理它们。静态渲染和水化的页面还是比完备客户端渲染的 React 运用（如 create-react-app 天生的页面）要好得多，后者没有 JavaScript 就没法用。我确实不太满意 Gatsby 的宣扬手腕，他们说 Gatsby 适宜任何类型的网站。客户端 JavaScript 是有本钱的，开拓职员该当意识到这一点。
用更少的 JavaScript 构建 Gatsby 网站这使我陷入了一个两难田地：利用 Gatsby 开拓网站是绝妙的体验；但是开拓体验（DX）该当永久排在用户体验（UX）之后。那么如何在构建 Gatsby 网站时避免那些由于大量利用 JS 而带来的固有问题呢？当然，我们该当只管即便删掉那些 JavaScript。所幸 Gatsby 社区内做出了很多努力来构建更、，更轻量级的网站：
首先，利用 gatsby-plugin-preact 将 React 换成 Preact 可以节省几千字节。我在 Component Gallery 上用了它，急速将 JavaScript 负载减少了约 30kb。
如果你想用更激进的方法，可以利用一个插件来从你的 Gatsby 网站删除所有 Gatsby JavaScript。
你可以连续编写 react 组件和 GraphQL，乃至可以利用 CSS-in-JS 库（只要它输出 CSS 或内联样式），而无需向浏览器发送任何 JavaScript。只要扔掉所有客户端 JavaScript 就可以办理 Gatsby 的大多数问题。Gatsby Starter Low Tech 博客利用 no-javascript 插件和其他一些技能（包括将所有图像转换为灰度），来帮助你创建一个轻量且节能的博客。
用 Eleventy 从头开始这时候我觉得有点不对劲——利用一个会大量推送客户端 JavaScript 的框架，却要删除所有 JavaScript 代码，这彷佛是一种很繁芜的网站构建办法。我想看看是否可以不用客户端 JavaScript 来构建功能完善的博客，这样就用不着什么插件来删除它了。于是我转向了另一个选项：
Eleventy 鼓励你按照自己的意愿构建网站。你可以利用自己最熟习的技能，它只卖力天生页面。Eleventy 为你供应了十种可以任意搭配的模板措辞选项，包括 markdown、nunjucks 和 liquid；这意味着我可以从 Craft 中复制并粘贴旧的模板，变动文件扩展名，并做一些细微的调度就能运行在 Eleventy 中。用不着针对什么新的打包器来调度前端构建流程，我只需放入现有的 webpack 文件和 src 文件夹即可。利用并发包，我可以在 Eleventy 的 serve 过程中同时运行构建脚本。
像 Gatsby 一样，Eleventy 也有一个插件生态系统（虽然很小，但增长迅速）。我挑选了一些不须要添加客户端 JavaScript 也能添加功能的插件：
在帖子中显示代码段时，常日会包含特定于措辞的语法高亮显示。有一些 JavaScript 库可以做到这一点，个中最盛行的彷佛是 Prism——你可以在客户端中运行它，但由于我们利用的是 JavaScript SSG，因此可以在构建时运行它，并将语法高亮显示所需的 HTML 元素和 CSS 类直接烘焙到文档中——这样就无需在浏览器中下载这个库了。
eleventy-plugin-embed-tweet 也可以在构建时而非客户端运行 JavaScript。Twitter 的默认嵌入代码迫利用户下载大量 JavaScript 才能显示一条推文。这个插件可以在构建时获取并渲染推文，这样只需少量 HTML 和 CSS 即可，根本不须要额外的 JavaScript。
与其他新技能一样，Eleventy 短缺某些更加成熟的工具所供应的功能。例如，在 Eleventy 中没有一种优雅的方法来天生相应式图像。比较之下，Gatsby 中出色的 gatsby-image 插件可以天生延迟加载和相应式的图片元素，并能在加载全分辨率文件后在低分辨率或 SVG 版本的图像间平滑切换。Eleventry 还有一些让我感到困惑的事情：我有一阵子一贯搞不懂它的分页功能，认为它只是将帖子分页到指定大小的一些组中，之后才意识到它可以动态天生全新的页面；我还创造自己在同一文件中混用了模板措辞：你可以随意在 markdown 文件中包含 nunjucks 标签，或将基于 yaml 的 frontmatter 换成 JavaScript，但这会毁坏语法高亮显示、linting 和自动格式化。
结论如果你还是选择了 Gatsby，我也不会怪你——有时候利用一个 opinionated 的框架也不错，并且如果你想要快速完成事情，这是一个可靠的办理方案。只是要把稳它的性能本钱，以及所有与 JavaScript 干系的潜在可访问性问题。
我选择利用 Eleventy 来构建自己的网站，但我知道这种方法并不适宜所有人——完备按照自己的意愿来构建某些东西可能是很麻烦的事情。但你也用不着完备学我——与 Gatsby 类似，Eleventy 也有许多入门项目可以用作根本。个中一些工具，例如 Andy Bell 的 Hylia 入门套件可以在几分钟内搞定一个网站。它乃至预配置了 Netlify CMS，因此你无需编写任何代码即可编辑网站内容。
我学到了什么呢？利用 Eleventy 可以轻松构建不带 JavaScript 的博客，但总会有一些功能须要客户端 JavaScript 的：
我的网站拿掉了 Google Analytics，但它对用户来说没什么用场，以是我也不在乎——我会在另一篇文章中先容它的做事端替代品。我利用了 loading="lazy"属性来延迟加载图片，但它的浏览器支持不足完全，并且在原生浏览器实现改进之前，它无法在加载图片时淡入淡出。阴郁模式切换——虽然我可以只用 CSS 来实现，无需访问 cookies 或本地存储，但我没办法在页面之间保持设定的值。我是否会在不久的将来在网站上加入 JavaScript 呢？答案可能是否定的：我上面列出的功能并不是那么主要的。我并不是推举大家都删除自己网站上的所有 JavaScript 文件，但从现在开始，在构建网站时我会考试测验将 JavaScript 视为可选的额外功能，而不是体验的基本组成部分。我鼓励你也这样做。
关注我并转发此篇文章，私信我“领取资料”，即可免费得到InfoQ代价4999元迷你书！
