江苏龙网

  1. 主页 > 生活百科 > >

你的博客用不着什么 JavaScript 框架( 二 )

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 和自动格式化 。


推荐阅读


上一篇：红碎茶怎么泡,怎么泡祁门红茶

下一篇：蓝目菊花谢后怎么处理,金丝皇菊菊花茶有那些功效