乐高，而不是又一个静态网站生成器

我用 JavaScript 编写了一个静态网站生成器 (SSG)，名叫 Lego，已经开发了一年多。当我决定重写网站时，市面上有很多 SSG 可供选择。最终，我把选择范围缩小到以下几个：

• Gatsby——我非常喜欢Gatsby的输出优化效果。我唯一遇到的问题是构建速度太慢。
• Hugo——我喜欢Hugo的速度。然而，坦白说，它的模板语言实在令人失望。
• Jekyll——对于我网站的规模来说速度足够快，而且它的模板语言 Liquid 与 Jinja2 非常相似。然而，要像 Gatsby 那样进行优化却很有挑战性。

我闲得无聊，于是就做了每个无聊的开发者都会做的事：写自己的框架。这次，我决定写一个静态网站生成器，它融合了这三个框架的优点。

我对此有一些要求，并决定尝试构建它一周左右，看看这是否可行。

• 支持 Liquid（最近新增了对 Nunjucks 的支持）。
• 支持 Markdown 格式的文章，YAML 格式的数据（之后会扩展到 JS 和 JSON）。
• 使用 terser 转译和压缩 JS，使用 PostCSS 处理 CSS（两者都用于browserslist确定目标）。
• 修改资源，例如 JS、CSS 和图像。
• 优化图像。
• 提取关键样式并将其内联到所有页面的关键样式中。
• 压缩所有页面的HTML代码。
• 生成按标签分类的帖子列表。例如，site/tags/javascript应列出所有带有特定标签的页面JavaScript。
• 开发过程中实时重载。

出乎意料的是，结果还不错。虽然还有一些小瑕疵，但我很快就把网站迁移过去了，希望能解决这些问题。

好戏就此开始。

乐高启动大约需要 5-6 秒。虽然这比 Gatsby 慢得多，但我还是想尽可能地提升它的性能。这个项目的初衷是学习新知识，并在过程中获得乐趣，所以我决定对乐高进行性能分析。分析结果中发现了一些有趣的地方。

• 仅仅引入 PostCSS 插件就需要一两秒钟。
• 某些代码路径的运行频率过高。

解决这些问题后，时间缩短到了 2-4 秒左右。

正是在这个时候，我开始研究缓存。虽然设计缓存技术颇具挑战性，但实际实现起来却相当简单。实现缓存之后，我对编写自己的静态网站生成器（SSG）的整个过程感到非常满意。现在，我拥有了一个快速、高性能的SSG，能够生成优化后的网站。

现在，乐高启动我网站的开发服务器只需不到 600 毫秒。重新构建也只需几百毫秒。生产环境构建大约需要 20 秒！

我编写了一个基准测试来验证所有这些。当使用 Liquid 模板时，Lego 的速度比 Jekyll 快约 1.5 倍；而当使用 Nunjuck 模板时，Lego 的速度更是比 Jekyll 快了惊人的 8.7 倍。

然后，我根据自身需求添加了一些功能，例如 RSS 源生成和站点地图生成。虽然乐高支持自动生成响应式图片，但我认为它的稳定性稍逊一筹，我会在接下来的几天里重点关注这方面。

如果你喜欢冒险，想尝试一下，

• 跑步npm i -g @astronomersiva/lego。

• 使用以下命令生成网站lego g my-awesome-site。这将生成一个虚拟网站。

• 运行lego s以启动服务器。

您也可以在GitHub上查看代码。

祝大家周末愉快！