你的博客用不着什么 JavaScript 框架( 二 )
博客真的需要 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 和自动格式化 。
推荐阅读
- 你的 Mac 用对了吗?推荐一些 Mac 上比较好用的软件
- 苹果|你的iPhone 11不久之后可能成“古董”了!苹果做了一个决定
- 润肺的食物 九款药膳食物保护你的肺
- 给你的Nginx加个防火墙
- 生肖|当你的上司请更上级领导吃饭,也邀请你去,那你该不该买单呢?
- 半小时,将你的Spark SQL模型变为在线服务
- 5个规则,确保你的微服务优化运行
- 心理测试 你的择偶标准是什么
- python:用python断你的网,没商量
- 洗面奶|平价好物:温和洁肤,抹去你的油光肌,让皮肤保持光滑清爽