亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

 

大家好，我是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??

 

當然，以上的觀點僅供參考，在選擇框架時，我們還需要根據項目的具體需求、技術棧和團隊人員技能水平等方面進行綜合考慮。

最后

一臺電腦,一個鍵盤,盡情揮灑智慧的人生;幾行數字,幾個字母,認真編寫生活的美好;

一 個靈感,一段程序,推動科技進步,促進社會發展。