在追求极致性能和简洁架构的道路上，许多网站开发者都面临如何平衡功能丰富性与页面加载速度的挑战。作为一个曾经基于Next.js构建的内容网站，我们团队近期完成了一次重要的架构迁移 —— 从Next.js转向Eleventy。此次转型不仅没有带来原有功能的损失，反而显著提升了网站的整体性能，加载速度提高了24%。本文将深入探讨这一迁移过程的关键考虑、技术细节及实际收益，旨在为对轻量化静态网站建设有需求的开发者提供有价值的参考和启发。 我们的内容网站此前使用Next.js搭建，尽管其成熟的生态和丰富功能能够满足复杂需求，但我们发现其庞大的JavaScript资产和大量依赖包常常成为性能瓶颈。通过数据对比可以明显看到，Next.js版本主页加载时需要处理高达2,161KB的JavaScript文件，文件数量达33个，且项目依赖包高达1115个，整站代码行数为6,877行。
与之形成鲜明对比的是，迁移至Eleventy后，主页的JavaScript体积骤降至11.3KB，文件仅有2个，依赖数量减少到13个，代码行数降至4,307行，而Lighthouse性能评分由76飙升至97。这足以证明在不改变用户体验的前提下，选择轻量级静态站点生成器所带来的巨大潜力。 Eleventy（简称11ty）并非具备神奇性能优化特性的框架，它核心的优势在于极简的构建流程及清晰的职责划分。Eleventy专注于构建时对HTML模板的渲染，CSS的打包及必要JavaScript代码的集成，而在浏览器端不额外加载无用代码。这种“构建时完结”的理念让终端用户获得更快的加载速度，同时也极大减轻了开发团队在维护依赖升级和环境适配上的压力。 截止目前，Eleventy自2018年以来仅经历了三次主要版本升级，使得它的稳定性尤为突出。
相较于依赖频繁变动导致持续修复的复杂框架，Eleventy让我们发现在忙碌的项目周期里，无需花费宝贵时间应对版本带来的连锁反应，从而将更多精力专注于核心业务和用户体验的提升。 虽然Eleventy在功能上并不如Next.js那般丰富，尤其在开发体验层面，需要额外投入一部分时间实现与Next.js相当的功能，但这种前期成本换来了更加精炼和可控的代码库。迁移过程中的一项关键挑战是如何选用合适的模板语言。Eleventy允许使用多种模板语法，为了保持代码的简洁性和可维护性，我们选择了WebC——一种支持自定义HTML标签的模板语言。WebC允许将JavaScript、CSS和HTML完美结合，使用原生Web组件的写法，极大地接近了标准Web开发方式的体验。 WebC组件文件由<script>标签内的JavaScript、<style>标签中CSS及包裹HTML结构组成。
它不仅支持插槽（slot），还允许对props进行精细化管理，如区分构建时静态参数和运行时动态参数，这为页面的动态渲染和交互提供了灵活性。虽然WebC社区相对较小且文档资源有限，我们的实践体会是，通过不断摸索和试错，能够逐渐驾驭其渲染机制，最终实现与之前使用JSX相当甚至更优的代码结构。 在样式打包方面，WebC自带简易的CSS打包器，我们通过声明样式文件的方式，将核心样式和组件样式分开管理，并配合Lightning CSS的转换插件完成CSS的压缩和浏览器兼容性处理。这不仅优化了CSS加载时间，也保证了样式的一致性和现代浏览器的支持。 JavaScript交互层面，在Next.js中，虽然整体项目充斥大量JavaScript文件，但实际需要在客户端运行的交互逻辑相对有限。Eleventy结合WebC和Web Components实现了渐进式增强，静态HTML首先快速渲染，随后JavaScript注册Web组件完成交互绑定，例如定义自定义标签并在DOM中注册。
这样做既保证了初始页面加载的快速响应，也使得代码高度模块化和复用性强。服务工作线程（Service Worker）的实现同样经历了一番变革。Next.js通过next-pwa插件自动生成并管理Service Worker，但Eleventy没有直接替代插件。借助Workbox，我们自行编写了Service Worker脚本，利用注入Manifest的方式缓存静态资源，针对不同资源采用缓存优先、网络优先及动态更新的缓存策略，全面提升离线体验和资源加载效率。 这一自定义方案更适合Eleventy的构建特点，避免了Next.js插件可能带来的黑盒问题，同时增强了对缓存逻辑的灵活控制。整体来说，迁移为我们带来的好处不仅是页面加载性能提升24%，还体现在构建速度明显加快、依赖包数大幅减少、代码量更精简、维护更简便以及更稳定的运行环境。
站点更像是一个简单而高效的网站，而非一个沉重的应用程序。 当然，每一项迁移都伴随着学习成本。Eleventy的生态相对小众，对WebC的掌握需要时间。实现以前由Next.js提供的丰富功能时，研发流程变得更手动，需要自行搭配工具和插件完成。不过，经过一段时间的磨合，我们充分体会到“减法”思维带来的益处。对于内容型静态网站，追求快速加载和简洁依赖，选择轻量级且构建清晰的工具，或许是最佳路径。
从整体视角出发，选择Eleventy代表了一种符合实际业务需求的理性决策。对比Next.js的通用性和复杂度，Eleventy更专注于构建静态内容的高效方案。对于那些没有复杂业务逻辑或服务端渲染需求的站点而言，Eleventy充分释放了性能潜力，使开发过程更清晰流畅。除此之外，网站更易于维护和迭代，尤其在多项目并行时能节省大量精力。 综上所述，我们的迁移过程诠释了如何基于项目特点合理选择技术栈，实现性能的实质提升。用最小的工具堆栈，去除不必要的依赖和臃肿，保持代码的整洁和稳定，是网站开发中值得遵循的优秀实践。
未来，我们也将持续关注Eleventy生态的发展和优化，继续探索提升用户线上体验的新方法。对于渴望精简架构、提升访问速度的开发者来说，Eleventy提供了值得尝试的创新方向。
