日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

 

大家好，我是Echa。

隨著Web 技術(shù)開發(fā)高速發(fā)展，移動(dòng)端用戶占據(jù)大部分市場，對(duì)前端響應(yīng)式布局，以及頁面加載速度有著非常高的要求，用戶訪問Web 頁面等待的極限一般在3-6秒以內(nèi)，凡是過了這個(gè)時(shí)間段的網(wǎng)頁內(nèi)容還未加載出來，用戶馬上就劃走了該頁面。市場為了徹底解決該問題，這個(gè)時(shí)候越來越多的前端渲染框架雨后春筍一般的出現(xiàn)在開發(fā)者們的視野中。

這些渲染框架往往會(huì)為網(wǎng)頁提供 SSR、靜態(tài)站點(diǎn)生成和自動(dòng)代碼分割等功能，幫助開發(fā)者構(gòu)建高性能、可擴(kuò)展和易于維護(hù)的 Web 應(yīng)用程序，提高開發(fā)效率和用戶體驗(yàn)，以及訪問加載速度和按需加載。有興趣的小伙伴們可以回顧看看小編最近總結(jié)如下：

最新的 web 框架性能報(bào)告出爐

2023 年靜態(tài)站點(diǎn)生成器 SSG 大全

最新最全的 VS Code 插件推薦

今天小編帶著大家一起看看現(xiàn)在流行的前端渲染框架到底有哪些。希望對(duì)大家學(xué)習(xí)前端有所幫助。另外，小編會(huì)從六個(gè)分不同維度去講解這些前端渲染框架。

全文大綱

1. 現(xiàn)代流行的前端渲染框架有哪些？
2. 分別他們?cè)?state of js 2022 的表現(xiàn)如何？
3. 分別他們?cè)?npm install 速度對(duì)比
4. 分別他們?cè)诳蛻舳?JS 大小對(duì)比
5. 分別他們?cè)趎ode_modules 大小對(duì)比
6. 分別他們?cè)趎pm audit 對(duì)比

現(xiàn)代流行的前端渲染框架有哪些？

1. Astro

 

官方網(wǎng)址：https://astro.build/

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

Astro是當(dāng)前JAVAScript熱潮中的一種新方法：從響應(yīng)式前端獲得更多性能。它是由創(chuàng)建Snowpack構(gòu)建工具的同一團(tuán)隊(duì)開發(fā)的。最新發(fā)布了 Astro 2.1 正式發(fā)布 有興趣的可以看看里面有更詳細(xì)介紹。

已經(jīng)有一些嘗試通過避免昂貴的預(yù)取和引導(dǎo)來提高性能，這些操作已經(jīng)影響了類似于React的框架。

Astro采用了一種有趣而新穎的方法。它是一個(gè)構(gòu)建系統(tǒng)，可以讓用戶使用任何想要的框架（React、Svelte、Vue等），然后找到最適合使用JavaScript延遲加載的地方。可以將其視為捆綁時(shí)應(yīng)用于應(yīng)用程序的一種智能代碼拆分。具體如下圖：

Astro 官網(wǎng)

 

 

1. Eleventy

 

官網(wǎng)網(wǎng)址：https://www.11ty.cn/

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

Eleventy 是一個(gè)更簡單的靜態(tài)站點(diǎn)生成器。Jekyll 的替代品，用 JavaScript 編寫。將模板目錄（不同類型）轉(zhuǎn)換為 html。它默認(rèn)為零配置，但有靈活的配置選項(xiàng)。Eleventy 與你的項(xiàng)目的現(xiàn)有目錄結(jié)構(gòu)一起工作。

 

• Eleventy 使用獨(dú)立的模板引擎
• Eleventy 可以使用多種模板語言。適用于 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug 和 JavaScript 模板文字。
• Eleventy 不是一個(gè) JavaScript 框架
• Eleventy 是漸進(jìn)式的
• Eleventy 對(duì)數(shù)據(jù)的處理非常好

 

 

 

1. Enhance

 

Enhance是一個(gè)基于Web標(biāo)準(zhǔn)的輕量級(jí)前端框架，它主要用于構(gòu)建動(dòng)態(tài)、可擴(kuò)展的Web應(yīng)用程序。它支持漸進(jìn)式增強(qiáng)的開發(fā)模式，即在不同的瀏覽器和設(shè)備上，根據(jù)支持的功能和特性，自動(dòng)加載和渲染不同的組件和樣式。這樣可以提高網(wǎng)站的兼容性和可訪問性，同時(shí)可以提高性能和用戶體驗(yàn)。

 

 

1. Gatsby

 

官網(wǎng)網(wǎng)址：https://www.gatsbyjs.com/

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

Gatsby 是一個(gè)基于 React ，用于搭建靜態(tài)站點(diǎn)的開源框架，用于幫助 開發(fā)者構(gòu)建運(yùn)行速度極快的網(wǎng)站。可以說它是一個(gè)靜態(tài)站點(diǎn)生成器，Gatsby 主要的應(yīng)用的技術(shù)是 React 和 GraphQL。

Gatsby 能快速使用 React 生態(tài)系統(tǒng)來生成靜態(tài)網(wǎng)站，它具備更高的性能，而且 Gatsby 的生態(tài)也很強(qiáng)大。

當(dāng)你想自己動(dòng)手搭建個(gè)人博客時(shí)，考慮的是 seo 要好，而且你不用理會(huì)數(shù)據(jù)庫和服務(wù)器等復(fù)雜的部署設(shè)置，Gatsby 構(gòu)建的網(wǎng)站為靜態(tài)站點(diǎn)，你可以很輕松的將網(wǎng)站部署在很多服務(wù)上。Gatsby 不需要等待請(qǐng)求時(shí)生成頁面，而是預(yù)先生成頁面，因此網(wǎng)站的速度會(huì)很快。

Gatsby 中運(yùn)用了 React, react-router, Webpack 以及 GraphQL 等新技術(shù)，也跟隨了技術(shù)潮流。

 

 

1. Next.js

 

官網(wǎng)網(wǎng)址：https://nextjs.org/

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

Next.js 是 React 服務(wù)端渲染應(yīng)用框架. 用于構(gòu)建 SEO 友好的 SPA 應(yīng)用. 目前最新版是：

Next.js 13.2 正式發(fā)布

它提供了SSR、靜態(tài)站點(diǎn)生成和自動(dòng)代碼分割等功能。Next.js也支持自定義路由、數(shù)據(jù)獲取、靜態(tài)資源優(yōu)化等功能，可以方便地構(gòu)建動(dòng)態(tài)Web應(yīng)用程序。它還具有易用性和高效性，是構(gòu)建現(xiàn)代Web應(yīng)用程序的不錯(cuò)選擇，也一直是React官方推薦的全棧框架。

 

• 支持兩種預(yù)渲染方式, 靜態(tài)生成和服務(wù)器端渲染.
• 基于頁面的路由系統(tǒng), 路由零配置
• 自動(dòng)代碼拆分. 優(yōu)化頁面加載速度.
• 支持靜態(tài)導(dǎo)出, 可將應(yīng)用導(dǎo)出為靜態(tài)網(wǎng)站.
• 內(nèi)置 css-in-JS 庫 styled-jsx
• 方案成熟, 可用于生產(chǎn)環(huán)境, 世界許多公司都在使用
• 應(yīng)用部署簡單, 擁有專屬部署環(huán)境 Vercel, 也可以部署在其他環(huán)境

 

 

 

 

1. Remix

 

官網(wǎng)網(wǎng)址： http://remix.run/

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

Remix是一個(gè)基于React的前端驅(qū)動(dòng)的服務(wù)端渲染框架，具有自動(dòng)代碼分割和預(yù)取、內(nèi)置路由、狀態(tài)管理和數(shù)據(jù)層、基于ESLint和TypeScript的代碼檢查和類型檢查等特點(diǎn)，可以讓開發(fā)者使用前端技術(shù)棧來構(gòu)建網(wǎng)站，同時(shí)享受服務(wù)端渲染帶來的性能和SEO優(yōu)勢(shì)。

 

 

1. SvelteKit

 

官網(wǎng)網(wǎng)址： https://kit.svelte.dev/

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

Remix是一個(gè)基于React的前端驅(qū)動(dòng)的服務(wù)端渲染框架，具有自動(dòng)代碼分割和預(yù)取、內(nèi)置路由、狀態(tài)管理和數(shù)據(jù)層、基于ESLint和TypeScript的代碼檢查和類型檢查等特點(diǎn)，可以讓開發(fā)者使用前端技術(shù)棧來構(gòu)建網(wǎng)站，同時(shí)享受服務(wù)端渲染帶來的性能和SEO優(yōu)勢(shì)。

 

 

1. Nuxt

 

官網(wǎng)網(wǎng)址： https://nuxt.com/

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

Nuxt是一個(gè)基于Vue.js的輕量級(jí)前端框架，它支持 SSR、靜態(tài)站點(diǎn)生成和自動(dòng)路由等功能。Nuxt 還提供了豐富的插件和模塊，如 axIOS、vuex、sass 等，方便快速構(gòu)建可擴(kuò)展的 Web 應(yīng)用程序。

Nuxt提供了一種基于Vue.js的服務(wù)端渲染框架，可以幫助開發(fā)者快速構(gòu)建高性能、可擴(kuò)展和易于維護(hù)的Web應(yīng)用程序。Nuxt的設(shè)計(jì)和API簡單直觀，可以讓開發(fā)者快速上手和理解，同時(shí)還提供了許多工具和插件來幫助開發(fā)者更輕松地構(gòu)建應(yīng)用程序。例如，Nuxt支持自動(dòng)代碼分割、靜態(tài)生成、動(dòng)態(tài)路由、異步數(shù)據(jù)加載等特性，如axios、vuex、sass等，可以快速構(gòu)建可擴(kuò)展的Web應(yīng)用程序。

nuxt特性

 

• 基于 Vue.js
• 自動(dòng)代碼分層
• 服務(wù)端渲染
• 強(qiáng)大的路由功能，支持異步數(shù)據(jù)
• 靜態(tài)文件服務(wù)
• ES2015+ 語法支持
• 打包和壓縮 JS 和 CSS
• HTML 頭部標(biāo)簽管理
• 支持各種樣式預(yù)處理器： SASS、LESS、 Stylus 等等

 

 

分別他們?cè)?state of js 2022 的表現(xiàn)如何？

 

1. 隨時(shí)間變化滿意度, 關(guān)注度, 使用率, 和認(rèn)知率的的排行，具體如下圖：

 

滿意度

關(guān)注度

使用度

認(rèn)知度

 

1. 隨時(shí)間變化的體驗(yàn)

 

 

現(xiàn)在使用最廣泛的還是Next.js，牢牢占據(jù)霸主地位，但是Astro、SvelteKit等新興框架也有后來居上的趨勢(shì)，老牌框架Gastaby正在逐步敗落。

 

1. 積極/消極體驗(yàn)拆分圖

 

這張圖表將 用戶的積極體驗(yàn)(想學(xué)習(xí)，會(huì)再次使用)和消極體驗(yàn)(不感興趣，不會(huì)再次使用) 分別呈現(xiàn)在中軸兩側(cè)。

柱狀的厚度代表了解某一技術(shù)的訪問者數(shù)量。

 

分別他們?cè)?npm install 速度對(duì)比

下面我們進(jìn)入實(shí)際使用的對(duì)比，基于以下版本：

 

• 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

 

顯示的單位為秒，時(shí)間越小越好。

npm install 速度對(duì)比

 

以上每個(gè)工具都安裝了五次，統(tǒng)計(jì)中的時(shí)間是五次安裝的平均值（每次安裝都會(huì)使用npm cache clean --force清除緩存）。

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

分別他們?cè)诳蛻舳?JS 大小對(duì)比

表中顯示的是運(yùn)行時(shí)客戶端未壓縮的JS大小，單位是KB。

客戶端 JS 大小對(duì)比

 

Astro、Eleventy、Enhance的運(yùn)行時(shí)客戶端JS是0KB？聽起來有點(diǎn)不可思議，但是它們的設(shè)計(jì)理念確實(shí)都是盡可能的將邏輯代碼放到服務(wù)端，從而減少客戶端JS的代碼體積。

SvelteKit的客戶端JS也比較小，這是因?yàn)榭蚣軙?huì)在構(gòu)建階段將Svelte組件轉(zhuǎn)換為原生的JavaScript代碼，因此在運(yùn)行時(shí)只需要加載最終的代碼，而不需要加載Svelte框架本身的代碼。

相比之下，Gatsby、Next.js、Nuxt等框架的運(yùn)行時(shí)JavaScript體積相對(duì)較大，主要原因是這些框架的功能較為復(fù)雜，需要在運(yùn)行時(shí)動(dòng)態(tài)加載一些額外的代碼。例如，Next.js框架需要在運(yùn)行時(shí)動(dòng)態(tài)加載React和Next.js框架本身的代碼，從而導(dǎo)致運(yùn)行時(shí)JavaScript體積較大。

分別他們?cè)趎ode_modules 大小對(duì)比

表中顯示的單位是MB。

node_modules 大小對(duì)比

 

Gatsby、Remix的捆綁依賴太多了，下載后的體積要比其他的依賴高出不少。

Elevent的體積最小，只有34MB，可見它提供的功能也足夠輕量。

這里值得注意的是Next.js，他的體積也不是最小的，但是安裝速度非常快，這是因?yàn)樗鼤?huì)自動(dòng)下載預(yù)構(gòu)建的二進(jìn)制文件，這些二進(jìn)制文件已經(jīng)包含了所有必要的依賴和代碼，無需在安裝過程中進(jìn)行編譯，因此安裝速度非常快。

分別他們?cè)趎pm audit 對(duì)比

npm audit是 npm 官方提供的一個(gè)依賴安全檢測(cè)工具，它會(huì)從npm公共數(shù)據(jù)庫中獲取最新的安全漏洞信息，并將其與當(dāng)前項(xiàng)目中已安裝的包進(jìn)行比較，從而檢測(cè)出項(xiàng)目中存在的安全漏洞。如果檢測(cè)到漏洞，npm audit將會(huì)給出相應(yīng)的修復(fù)建議，包括更新包版本、安裝補(bǔ)丁程序等。

下面這些框架在創(chuàng)建項(xiàng)目的時(shí)候會(huì)顯示標(biāo)準(zhǔn)的npm audit報(bào)告：

 

• Eleventy
• Enhance
• Nuxt
• Remix
• SvelteKit

 

而以下這些框架隱藏掉了報(bào)告（包括高危嚴(yán)重的漏洞）

 

• Astro??
• Gatsby??
• Next??

 

當(dāng)然，以上的觀點(diǎn)僅供參考，在選擇框架時(shí)，我們還需要根據(jù)項(xiàng)目的具體需求、技術(shù)棧和團(tuán)隊(duì)人員技能水平等方面進(jìn)行綜合考慮。

最后

一臺(tái)電腦,一個(gè)鍵盤,盡情揮灑智慧的人生;幾行數(shù)字,幾個(gè)字母,認(rèn)真編寫生活的美好;

一 個(gè)靈感,一段程序,推動(dòng)科技進(jìn)步,促進(jìn)社會(huì)發(fā)展。