2023年前端渲染框架大全

 

大家好，我是Echa。

随着Web 技术开发高速发展，移动端用户占据大部分市场，对前端响应式布局，以及页面加载速度有着非常高的要求，用户访问Web 页面等待的极限一般在3-6秒以内，凡是过了这个时间段的网页内容还未加载出来，用户马上就划走了该页面。市场为了彻底解决该问题，这个时候越来越多的前端渲染框架雨后春笋一般的出现在开发者们的视野中。

这些渲染框架往往会为网页提供 SSR、静态站点生成和自动代码分割等功能，帮助开发者构建高性能、可扩展和易于维护的 Web 应用程序，提高开发效率和用户体验，以及访问加载速度和按需加载。有兴趣的小伙伴们可以回顾看看小编最近总结如下：

最新的 web 框架性能报告出炉

2023 年静态站点生成器 SSG 大全

最新最全的 VS Code 插件推荐

今天小编带着大家一起看看现在流行的前端渲染框架到底有哪些。希望对大家学习前端有所帮助。另外，小编会从六个分不同维度去讲解这些前端渲染框架。

全文大纲

1. 现代流行的前端渲染框架有哪些？
2. 分别他们在 state of js 2022 的表现如何？
3. 分别他们在 npm install 速度对比
4. 分别他们在客户端 JS 大小对比
5. 分别他们在node_modules 大小对比
6. 分别他们在npm audit 对比

现代流行的前端渲染框架有哪些？

1. Astro

 

官方网址：https://astro.build/

Github：https://github.com/withastro/astro

Astro是当前JAVAScript热潮中的一种新方法：从响应式前端获得更多性能。它是由创建Snowpack构建工具的同一团队开发的。最新发布了 Astro 2.1 正式发布 有兴趣的可以看看里面有更详细介绍。

已经有一些尝试通过避免昂贵的预取和引导来提高性能，这些操作已经影响了类似于React的框架。

Astro采用了一种有趣而新颖的方法。它是一个构建系统，可以让用户使用任何想要的框架（React、Svelte、Vue等），然后找到最适合使用JavaScript延迟加载的地方。可以将其视为捆绑时应用于应用程序的一种智能代码拆分。具体如下图：

Astro 官网

 

 

1. Eleventy

 

官网网址：https://www.11ty.cn/

Github：https://github.com/11ty/eleventy/

Eleventy 是一个更简单的静态站点生成器。Jekyll 的替代品，用 JavaScript 编写。将模板目录（不同类型）转换为 html。它默认为零配置，但有灵活的配置选项。Eleventy 与你的项目的现有目录结构一起工作。

 

• Eleventy 使用独立的模板引擎
• Eleventy 可以使用多种模板语言。适用于 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug 和 JavaScript 模板文字。
• Eleventy 不是一个 JavaScript 框架
• Eleventy 是渐进式的
• Eleventy 对数据的处理非常好

 

 

 

1. Enhance

 

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

 

 

1. Gatsby

 

官网网址：https://www.gatsbyjs.com/

Github： https://github.com/gatsbyjs/gatsby

Gatsby 是一个基于 React ，用于搭建静态站点的开源框架，用于帮助 开发者构建运行速度极快的网站。可以说它是一个静态站点生成器，Gatsby 主要的应用的技术是 React 和 GraphQL。

Gatsby 能快速使用 React 生态系统来生成静态网站，它具备更高的性能，而且 Gatsby 的生态也很强大。

当你想自己动手搭建个人博客时，考虑的是 seo 要好，而且你不用理会数据库和服务器等复杂的部署设置，Gatsby 构建的网站为静态站点，你可以很轻松的将网站部署在很多服务上。Gatsby 不需要等待请求时生成页面，而是预先生成页面，因此网站的速度会很快。

Gatsby 中运用了 React, react-router, Webpack 以及 GraphQL 等新技术，也跟随了技术潮流。

 

 

1. Next.js

 

官网网址：https://nextjs.org/

Github： https://github.com/vercel/next.js

Next.js 是 React 服务端渲染应用框架. 用于构建 SEO 友好的 SPA 应用. 目前最新版是：

Next.js 13.2 正式发布

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

 

• 支持两种预渲染方式, 静态生成和服务器端渲染.
• 基于页面的路由系统, 路由零配置
• 自动代码拆分. 优化页面加载速度.
• 支持静态导出, 可将应用导出为静态网站.
• 内置 css-in-JS 库 styled-jsx
• 方案成熟, 可用于生产环境, 世界许多公司都在使用
• 应用部署简单, 拥有专属部署环境 Vercel, 也可以部署在其他环境

 

 

 

 

1. Remix

 

官网网址： http://remix.run/

Github： https://github.com/remix-run

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

 

 

1. SvelteKit

 

官网网址： https://kit.svelte.dev/

Github： https://github.com/sveltejs/kit

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

 

 

1. Nuxt

 

官网网址： https://nuxt.com/

Github： https://github.com/nuxt/nuxt

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

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

nuxt特性

 

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES2015+ 语法支持
• 打包和压缩 JS 和 CSS
• HTML 头部标签管理
• 支持各种样式预处理器： SASS、LESS、 Stylus 等等

 

 

分别他们在 state of js 2022 的表现如何？

 

1. 随时间变化满意度, 关注度, 使用率, 和认知率的的排行，具体如下图：

 

满意度

关注度

使用度

认知度

 

1. 随时间变化的体验

 

 

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

 

1. 积极/消极体验拆分图

 

这张图表将 用户的积极体验(想学习，会再次使用)和消极体验(不感兴趣，不会再次使用) 分别呈现在中轴两侧。

柱状的厚度代表了解某一技术的访问者数量。

 

分别他们在 npm install 速度对比

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

 

• Astro2.0.15
• Eleventy2.0.0
• Enhance1.4.6
• Gatsby5.7.0
• Next.js13.2.1
• Nuxt3.2.2
• Remix1.13.0
• SvelteKit1.8.3

 

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

npm install 速度对比

 

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

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

分别他们在客户端 JS 大小对比

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

客户端 JS 大小对比

 

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。

node_modules 大小对比

 

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

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

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

分别他们在npm audit 对比

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

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

 

• Eleventy
• Enhance
• Nuxt
• Remix
• SvelteKit

 

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

 

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

 

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

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。