2023 年的前端渲染框架

大家好，我是 ConardLi。

随着 Web 开发的高速发展，越来越多的前端渲染框架出现在了开发者的视野中。这些框架往往会为网页提供 SSR、静态站点生成和自动代码分割等功能，帮助开发者构建高性能、可扩展和易于维护的 Web 应用程序，提高开发效率和用户体验。

今天我们来从业界的一些使用情况、以及一些特点来对它们做个简单的对比，首先我们来看看现在有哪些常见的前端渲染框架。

有哪些常见的前端渲染框架？

Astro

Astro 是一个新兴的前端渲染框架，它提出了一种创新的 Web 架构，有时也被称为孤岛架构。

在 Astro 中，每个页面都被视为单独的孤立单元，具有自己的 HTML、CSS、JavaScript 和数据。这样的设计可以提高页面构建和部署的效率，同时可以降低对整个站点的影响。当一个页面发生变化时，只需要重新构建和部署该页面，而不需要重新构建整个站点，可以大大缩短构建和部署时间。

Astro 的孤岛架构还允许每个页面都使用不同的开发工具和技术栈，例如 React、Vue、Svelte 等，从而可以根据具体需求和开发人员的技能选择最适合的开发工具和技术栈，提高开发效率和质量。

Next.js

Next.js 是一个基于 React 的前端框架，它提供了 SSR、静态站点生成和自动代码分割等功能。Next.js 也支持自定义路由、数据获取、静态资源优化等功能，可以方便地构建动态 Web 应用程序。它还具有易用性和高效性，是构建现代 Web 应用程序的不错选择，也一直是 React 官方推荐的全栈框架。

Remix

Remix 是一个基于 React 的前端驱动的服务端渲染框架，具有自动代码分割和预取、内置路由、状态管理和数据层、基于 ESLint 和 TypeScript 的代码检查和类型检查等特点，可以让开发者使用前端技术栈来构建网站，同时享受服务端渲染带来的性能和 SEO 优势。

Nuxt

Nuxt 是一个基于 Vue.js 的轻量级前端框架，它支持 SSR、静态站点生成和自动路由等功能。Nuxt 还提供了丰富的插件和模块，如 axios、vuex、sass 等，方便快速构建可扩展的 Web 应用程序。

Nuxt 提供了一种基于 Vue.js 的服务端渲染框架，可以帮助开发者快速构建高性能、可扩展和易于维护的 Web 应用程序。Nuxt 的设计和 API 简单直观，可以让开发者快速上手和理解，同时还提供了许多工具和插件来帮助开发者更轻松地构建应用程序。例如，Nuxt 支持自动代码分割、静态生成、动态路由、异步数据加载等特性，如 axios、vuex、sass 等，可以快速构建可扩展的 Web 应用程序。

Gatsby

Gatsby 是一个基于 React 的静态站点生成器。它使用 GraphQL 查询语言来获取数据，可以从多个来源（如 CMS、API、Markdown 文件等）获取数据，并自动创建优化的静态页面。Gatsby 还具有丰富的插件和扩展功能，如图像优化、代码分割和按需加载等。Gatsby 的主要特点是其速度、可扩展性和易用性。

SvelteKit

SvelteKit 是一个基于 Svelte 框架构建的全栈 Web 应用程序开发框架。它结合了客户端渲染和服务端渲染的优势，支持多种部署方式，如服务器端、函数式、静态文件等，提供了很多可扩展的插件，可以让开发者轻松构建高性能、可扩展和易于维护的 Web 应用程序。

Eleventy

Eleventy 是一个简单、高度可配置且可定制的静态网站生成器。它可以将多种模板语言转换成 HTML，并支持各种数据格式，包括 YAML、JSON、CSV 等。Eleventy 也可以使用插件来扩展功能，比如支持 Markdown 渲染等。Eleventy 的主要优势是它的灵活性和易用性。

Enhance

Enhance 是一个基于 Web 标准的轻量级前端框架，它主要用于构建动态、可扩展的 Web 应用程序。它支持渐进式增强的开发模式，即在不同的浏览器和设备上，根据支持的功能和特性，自动加载和渲染不同的组件和样式。这样可以提高网站的兼容性和可访问性，同时可以提高性能和用户体验。

它们在 state of js 2022 的表现如何？

使用体验随时间的变化

现在使用最广泛的还是 Next.js，牢牢占据霸主地位，但是 Astro、SvelteKit 等新兴框架也有后来居上的趋势，老牌框架 Gastaby 正在逐步败落。

当前口碑

大家当前的口碑基本上也和使用体验的变化趋势保持一致，使用最广泛也是评价最好的框架是 Next.js ，毕竟大家对 React 还是比较信任的，刚出现不久的 Astro、SvelteKit 评价也还不错。同样是刚推出的框架 Eleventy 口碑最差，大家对基于 Web Component 的开发方式还是不太感冒。

下面我们进入实际使用的对比，基于以下版本：

• Astro 2.0.15
• Eleventy 2.0.0
• Enhance 1.4.6
• Gatsby 5.7.0
• Next.js 13.2.1
• Nuxt 3.2.2
• Remix 1.13.0
• SvelteKit 1.8.3

npm install 速度

显示的单位为秒，时间越小越好。

以上每个工具都安装了五次，统计中的时间是五次安装的平均值（每次安装都会使用 npm cache clean --force 清除缓存）。

安装最快的 Next.js 只需要 3.72s，最慢的 Gatsby 居然要 43s，是 Next.js 十倍以上，但是 Next.js 提供的能力可不比 Gatsby 要弱啊。

客户端 JS 大小

表中显示的是运行时客户端未压缩的 JS 大小，单位是 KB。

Astro、Eleventy、Enhance 的运行时客户端 JS 是 0KB ？听起来有点不可思议，但是它们的设计理念确实都是尽可能的将逻辑代码放到服务端，从而减少客户端 JS 的代码体积。

SvelteKit 的客户端 JS 也比较小，这是因为框架会在构建阶段将 Svelte 组件转换为原生的 JavaScript 代码，因此在运行时只需要加载最终的代码，而不需要加载 Svelte 框架本身的代码。

相比之下，Gatsby、Next.js、Nuxt 等框架的运行时 JavaScript 体积相对较大，主要原因是这些框架的功能较为复杂，需要在运行时动态加载一些额外的代码。例如，Next.js 框架需要在运行时动态加载 React 和 Next.js 框架本身的代码，从而导致运行时 JavaScript 体积较大。

node_modules 大小

表中显示的单位是 MB。

Gatsby、Remix 的捆绑依赖太多了，下载后的体积要比其他的依赖高出不少。

Elevent 的体积最小，只有 34MB，可见它提供的功能也足够轻量。

这里值得注意的是 Next.js ，他的体积也不是最小的，但是安装速度非常快，这是因为它会自动下载预构建的二进制文件，这些二进制文件已经包含了所有必要的依赖和代码，无需在安装过程中进行编译，因此安装速度非常快。

npm audit

npm audit 是 npm 官方提供的一个依赖安全检测工具，它会从 npm 公共数据库中获取最新的安全漏洞信息，并将其与当前项目中已安装的包进行比较，从而检测出项目中存在的安全漏洞。如果检测到漏洞，npm audit 将会给出相应的修复建议，包括更新包版本、安装补丁程序等。

下面这些框架在创建项目的时候会显示标准的 npm audit 报告：

• Eleventy ✅
• Enhance ✅
• Nuxt ✅
• Remix ✅
• SvelteKit ✅

而以下这些框架隐藏掉了报告（包括高危严重的漏洞）

• Astro ⚠️
• Gatsby ⚠️
• Next ⚠️

当然，以上的观点仅供参考，在选择框架时，我么还需要根据项目的具体需求、技术栈和团队人员技能水平等方面进行综合考虑。

大家喜欢什么样的框架？或者正在使用哪个框架？欢迎在留言区讨论。

最后

参考链接

• https://www.zachleat.com/web/site-generator-review/
• https://2022.stateofjs.com/

如果这篇文章帮助到了你，欢迎点赞和关注。

如果你想加入高质量前端交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。

点赞和在看是最大的支持⬇️❤️⬇️