AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當(dāng)前位置:首頁 > 科技  > 軟件

超越React,JS代碼體積減少90%!它為何是2023年最好的Web框架?

來源: 責(zé)編: 時(shí)間:2023-10-10 18:32:29 267觀看
導(dǎo)讀作者丨Futari Boy編譯丨諾亞說到Web框架,大家最先想到的可能是 Vue、React,或者是Next.js。但不得不提,有個(gè)后起之秀“來勢洶洶”,1.0版本發(fā)布至今僅一年,就出盡風(fēng)頭。它就是Astro。Astro 是什么?一個(gè)現(xiàn)代化的靜態(tài)站點(diǎn)生成

作者丨Futari Boy1La28資訊網(wǎng)——每日最新資訊28at.com

編譯丨諾亞1La28資訊網(wǎng)——每日最新資訊28at.com

說到Web框架,大家最先想到的可能是 Vue、React,或者是Next.js。但不得不提,有個(gè)后起之秀“來勢洶洶”,1.0版本發(fā)布至今僅一年,就出盡風(fēng)頭。它就是Astro。1La28資訊網(wǎng)——每日最新資訊28at.com

Astro 是什么?一個(gè)現(xiàn)代化的靜態(tài)站點(diǎn)生成器和前端框架。它允許開發(fā)人員使用組件化的方式構(gòu)建內(nèi)容優(yōu)先的網(wǎng)站。2022 年,Astro在JavaScript明星項(xiàng)目中排名第七,一年新增了15k star!1La28資訊網(wǎng)——每日最新資訊28at.com

順帶一提,Astro 的作者也非無名之輩,而是Snowpack的作者 Fred K. Schott,這位可以說是Unbundle 構(gòu)建工具的祖師爺。1La28資訊網(wǎng)——每日最新資訊28at.com

有人說,Astro是2023年最好的Web框架。事實(shí)真的如此嗎?且聽我逐一道來。1La28資訊網(wǎng)——每日最新資訊28at.com

1、問題:JavaScript太多了

在web開發(fā)世界中,事情變化很快,特別是對于JavaScript前端開發(fā)人員。1La28資訊網(wǎng)——每日最新資訊28at.com

如此之快,以至于我們有時(shí)忽略或忘記了我們到底在為誰創(chuàng)建網(wǎng)站和web應(yīng)用程序:用戶。1La28資訊網(wǎng)——每日最新資訊28at.com

自從BackboneJS和AngularJS在2011/2012年變得非常流行以來,網(wǎng)絡(luò)上就充斥著spa。1La28資訊網(wǎng)——每日最新資訊28at.com

不要誤解我的意思,spa是很棒的,只要你想創(chuàng)建一個(gè)web應(yīng)用程序,而不是一個(gè)只有少量JavaScript交互的網(wǎng)站。1La28資訊網(wǎng)——每日最新資訊28at.com

但是,因?yàn)锳ngularJS是由Google開發(fā)的,而且用UI框架做JavaScript比用jQuery更漂亮,客觀上也更容易維護(hù),所以人們開始為一切都創(chuàng)建spa。1La28資訊網(wǎng)——每日最新資訊28at.com

是的,一切,即使是簡單的基于內(nèi)容的網(wǎng)站……1La28資訊網(wǎng)——每日最新資訊28at.com

這在當(dāng)時(shí)導(dǎo)致了兩個(gè)大問題:1La28資訊網(wǎng)——每日最新資訊28at.com

第一,后端框架開始針對REST API響應(yīng)進(jìn)行優(yōu)化,不再呈現(xiàn)HTML。因此,我們使用模板引擎的后端框架越來越少。特別是在NodeJS中。1La28資訊網(wǎng)——每日最新資訊28at.com

第二,SEO(搜索引擎優(yōu)化)。1La28資訊網(wǎng)——每日最新資訊28at.com

spa是在客戶端渲染的,這意味著當(dāng)像谷歌這樣的搜索引擎爬蟲進(jìn)入索引內(nèi)容時(shí),它們什么都沒有看到。1La28資訊網(wǎng)——每日最新資訊28at.com

所以我們找到了解決辦法,SSR。1La28資訊網(wǎng)——每日最新資訊28at.com

基本上,就是在后端執(zhí)行前端代碼以進(jìn)行初始渲染。1La28資訊網(wǎng)——每日最新資訊28at.com

問題是:你需要一個(gè)NodeJS服務(wù)器,因?yàn)橹挥蠳odeJS后端可以執(zhí)行客戶端的JavaScript語言。1La28資訊網(wǎng)——每日最新資訊28at.com

如果你有一個(gè)基于內(nèi)容的網(wǎng)站,這是一筆很大的開銷。1La28資訊網(wǎng)——每日最新資訊28at.com

因此,我們?yōu)檫@些網(wǎng)站找到了一個(gè)解決方案:SSG和預(yù)渲染。1La28資訊網(wǎng)——每日最新資訊28at.com

SSG代表“靜態(tài)站點(diǎn)生成器”。在spa出現(xiàn)之前,它們就已經(jīng)存在了,但在上述問題提出后,它們變得流行起來。1La28資訊網(wǎng)——每日最新資訊28at.com

但是,他們也有兩個(gè)大問題:1La28資訊網(wǎng)——每日最新資訊28at.com

  • 它們要么是用JavaScript以外的另一種語言編寫的,這使得在不同項(xiàng)目之間共享UI片段變得非常困難。
  • 或者它們是基于Vue、React或Svelte等前端框架使用JavaScript編寫的,因此,由于我們所說的Hydration(水化),發(fā)布了太多JavaScript。

現(xiàn)實(shí)是:有時(shí)你只需要一點(diǎn)點(diǎn)JavaScript來進(jìn)行微交互。而且,不是每一頁都寫!1La28資訊網(wǎng)——每日最新資訊28at.com

這就是Astro的用武之地。1La28資訊網(wǎng)——每日最新資訊28at.com

Astro開發(fā)團(tuán)隊(duì)最初的設(shè)計(jì)目標(biāo)就是:用 Astro 建立一個(gè)緩慢的網(wǎng)站幾乎是不可能的。測試顯示,與React Web 框架構(gòu)建的相同網(wǎng)站相比,Astro 網(wǎng)站的加載速度可以提高 40%,而JS代碼的體積可以減少90% 。1La28資訊網(wǎng)——每日最新資訊28at.com

2、解決方案:Astro

Astro最初是一個(gè)基于JavaScript語言的SSG,但在客戶端默認(rèn)不生成JavaScript。1La28資訊網(wǎng)——每日最新資訊28at.com

它在構(gòu)建時(shí)執(zhí)行JS代碼,就像SSR框架一樣,但它不會hydration(水化),因?yàn)榇蠖鄶?shù)基于內(nèi)容的網(wǎng)站不需要JS。1La28資訊網(wǎng)——每日最新資訊28at.com

但是當(dāng)你需要JS的時(shí)候,你該怎么辦呢?1La28資訊網(wǎng)——每日最新資訊28at.com

在需要時(shí)選擇加入JavaScript1La28資訊網(wǎng)——每日最新資訊28at.com

你可以像以前那樣使用JavaScript,使用命令式DOM操作或者……1La28資訊網(wǎng)——每日最新資訊28at.com

使用像AlpineJS或Vue-petite這樣的東西,它們是即插即用的,只提供少量JS。1La28資訊網(wǎng)——每日最新資訊28at.com

對于高級場景,或者當(dāng)你需要重用來自其他項(xiàng)目的UI組件時(shí),Astro創(chuàng)建了:Islands。1La28資訊網(wǎng)——每日最新資訊28at.com

Astro Islands是你可以從Vue、React、Svelte甚至更多前端框架中引入的獨(dú)立組件!1La28資訊網(wǎng)——每日最新資訊28at.com

這些組件將被單獨(dú)渲染并注入到最終的HTML中。靜態(tài)(沒有hydration)或動態(tài)(使用JS)。1La28資訊網(wǎng)——每日最新資訊28at.com

以下是Astro最終HTML頁面的樣子:1La28資訊網(wǎng)——每日最新資訊28at.com

1La28資訊網(wǎng)——每日最新資訊28at.com

在像Nuxt或NextJS這樣的框架中,頁面加載后沒有任何內(nèi)容是靜態(tài)的,因?yàn)樗鼤φ麄€(gè)頁面進(jìn)行hydration,從而注入不必要的JavaScript。1La28資訊網(wǎng)——每日最新資訊28at.com

之前提到,Astro最初是一個(gè)SSG,如今,它不止于此。1La28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在Astro也支持SSR,這意味著它也可以像一個(gè)簡單的后端框架一樣,使用最好的模板引擎。1La28資訊網(wǎng)——每日最新資訊28at.com

3、結(jié)論:為什么Astro是2023年最好的web框架?

在一個(gè)人們很容易分心的世界里,在我們用手機(jī)瀏覽互聯(lián)網(wǎng)的地方,速度和頁面加載是關(guān)鍵。1La28資訊網(wǎng)——每日最新資訊28at.com

Astro是一個(gè)Web框架,你可以將其用作靜態(tài)站點(diǎn)生成器(SSG)或簡單的后端來呈現(xiàn)不需要作為SPA的頁面。1La28資訊網(wǎng)——每日最新資訊28at.com

Astro擁有最通用的模板引擎:1La28資訊網(wǎng)——每日最新資訊28at.com

  • 它支持來自Vue、React、Svelte、Lit、Preact和Solid JS的外部組件。你可以輕松地重用表示組件。
  • 它具有基于文件的URL參數(shù)路由和查詢支持
  • 它有圖像優(yōu)化和轉(zhuǎn)換,支持Markdown,支持 .md和 .mdx,支持frontmatter
  • 它支持CSS作用域,支持SASS
  • 它具有腳本標(biāo)記作用域和綁定
  • 它可以很容易地集成自定義元素,也就是web組件
  • 它對圖像甚至組件都有延遲加載
  • 它具有靜態(tài)API端點(diǎn)支持
  • 它支持多種運(yùn)行時(shí):Node、Deno和Bun!
  • 它可以輕松部署在主要的網(wǎng)絡(luò)主機(jī)上,包括邊緣:Netlify, Vercel, Cloudflare, Firebase, Surge, Render, Heroku 等等!

所有這些都使Astro成為最好的創(chuàng)作工具:1La28資訊網(wǎng)——每日最新資訊28at.com

  • 活動網(wǎng)站
  • 清單的網(wǎng)站
  • 教程的網(wǎng)站
  • 投資組合的網(wǎng)站
  • 營銷網(wǎng)站
  • 視頻網(wǎng)站
  • 定制電子商務(wù)網(wǎng)站
  • 展示、博客或新聞網(wǎng)站

要創(chuàng)建簡單的spa,比如一個(gè)帶有固定音頻播放器的網(wǎng)站,你可以使用Hotwire的Turbo和Astro。1La28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在,你甚至可以使用Astro對“視圖轉(zhuǎn)換”的新支持,它可以在頁面導(dǎo)航期間保持狀態(tài)。1La28資訊網(wǎng)——每日最新資訊28at.com

我希望以上這些都能讓你更好地理解為什么要創(chuàng)建Astro,以及為什么它是2023年基于內(nèi)容的網(wǎng)站的最佳web框架。1La28資訊網(wǎng)——每日最新資訊28at.com

參考鏈接:https://itnext.io/ok-astro-is-the-best-web-framework-in-2023-heres-why-734ca15c70621La28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-12756-0.html超越React,JS代碼體積減少90%!它為何是2023年最好的Web框架?

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。郵件:2376512515@qq.com

上一篇: Kubernetes新手完全指南

下一篇: XGBoost 2.0:對基于樹的方法進(jìn)行了重大更新

標(biāo)簽:
  • 熱門焦點(diǎn)
Top