建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Vue.js+Astro比VueSPA更好嗎？
最近有很多開發(fā)者宣布他們已經(jīng)將網(wǎng)站遷移到Astro。這通常伴隨著一張接近完美的Lighthouse分數(shù)的截圖和一系列火箭表情符號。
深州ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
像大多數(shù)人一樣，我發(fā)現(xiàn)無休止的新框架會讓人感到厭倦。但我對Astro做了一些研究，認為它真的值得一試。
在本文中，我將向您展示如何使用 Astro 構建基于 Vue 的應用程序，我們將了解其獨特的架構如何帶來比單頁應用程序 (SPA) 更好的性能。
SPA 架構回顧
在我們看到 Astro 的實際應用之前，我們需要了解它的架構。為此，讓我們首先提醒自己單頁應用架構的優(yōu)缺點。
SPA 將網(wǎng)站的所有功能和內(nèi)容抽象為 JavaScript 組件。這很棒，因為它使網(wǎng)站的開發(fā)變得容易。
這種方法的缺點是當網(wǎng)站投入生產(chǎn)時。所有這些JavaScript組件被捆綁在一起成為一個大的應用程序。由于體積太大，瀏覽器下載和運行的速度可能會很慢。
當然，你可以通過代碼拆分來優(yōu)化這個捆綁。但是，瀏覽器仍然會有一些前期成本必須支付，只是為了啟動網(wǎng)站。
Islands architectureIslands
架構，Astro使用的架構，也使用了組件。然而，與單頁應用程序不同的是，這些組件并沒有捆綁到一個 JavaScript 包中。
相反，每個組件都被視為一個獨立的迷你應用程序，與所有其他組件隔離存在。
例如，如果您的頁面有一個基于 JavaScript 的導航欄，那將是一個迷你應用程序。如果它還具有 JavaScript 驅動的圖像輪播，那就是另一個迷你應用程序。等等。
但是，如果這些組件沒有被捆綁，它們?nèi)绾伪话陧椖恐?我將在下一節(jié)解釋這個問題。
服務器渲染的組件
Astro 主要是一個靜態(tài)站點生成器。它適用于大多數(shù)支持服務器渲染組件的 UI 庫，包括 Vue、Svelte、Preact、React 和 Lit。
因此，當Astro構建你的應用程序時，每個JavaScript組件都在服務器端加載，內(nèi)容是”快照“。這個快照被添加到靜態(tài)頁面上。
服務器渲染不是 Astro 特有的功能，但在 SPA 中這是一個可選功能，而在 Astro 中，這是一個至關重要的功能，我們將在下面看到。
Progressive hydration
這就是Astro的神奇之處——通過islands架構、服務器渲染組件和漸進式水合的組合。
由于我們的頁面被劃分為服務器渲染的迷你應用程序，互動層(JS)可以獨立加載，并且只在需要的時候加載。
例如，您可能有一個交互式表單。此表單位于頁面下方，位于視口之外。
表單是服務器渲染的，所以我們在頁面上看到它。但是，在用戶將其滾動到視圖中之前，不需要加載昂貴的 JavaScript。
這就是 Astro 中“漸進式水合作用”的含義——我們只在需要時加載 JavaScript。
建立一個 Vue + Astro 項目
現(xiàn)在理論已經(jīng)講完了，讓我們來看看它的實際效果吧!
要開始創(chuàng)建 Astro 項目，我們將首先創(chuàng)建一個目錄：
$ mkdir vue-astro
然后運行Astro 安裝向導：
$ npm init astro
安裝向導將允許我們選擇“Vue”作為我們選擇的框架。這將創(chuàng)建一個包含 Vue 組件的樣板項目。
Astro組件
Astro 頁面保存在 src/pages 目錄中。在默認安裝中，我們看到一個文件 index.astro，如下所示。
src/pages/index.astro
---
import VueCounter from '../components/VueCounter.vue';
let title = 'My Astro Site';
---
{title}
Astro 具有單文件組件樣式，與 Vue 類似，但有一些重要區(qū)別。
首先，在文件的頂部，我們看到似乎是前端內(nèi)容，即用 --- 劃定的內(nèi)容。這是在服務器端運行的JavaScript。這不會被發(fā)送到客戶端。
在這里我們可以看到兩件重要的事情：首先，我們正在導入一個Vue組件(你可以從任何支持的框架中導入組件)。另外，我們正在設置一個值：title。
這里聲明的所有變量在模板中都是可用的。你會注意到 title 在模板中以類似JSX的語法進行插值。
src/pages/index.astro
---
...
let title = 'My Astro Site';
---
{title}
接下來，注意模板中聲明的組件。
默認情況下，組件在客戶端是不交互的，只是由Astro進行服務器渲染。
如果我們想讓組件交互，即加載 JavaScript，我們需要給它一個指令告訴客戶端何時加載它。
在這種情況下，client:visible 指令告訴 Astro 當組件在頁面中可見時使 VueCounter交互。
如果發(fā)生這種情況，Astro 將從服務器請求該組件的 JS 并對其進行水合。
---
import VueCounter from '../components/VueCounter.vue';
...
---
加載Astro
現(xiàn)在讓我們運行 Astro 的開發(fā)服務器來查看我們的項目。
npm run dev
在頁面的源代碼中，你會看到在文檔中沒有任何的JavaScript捆綁! 不過，我們確實看到了服務器渲染的Vue組件。
我們還看到 Astro 在文檔正文的底部添加了一個腳本。在這里，它加載了一個模塊來水合 Vue 組件。
該模塊將下載 Vue 組件和依賴項(Vue 框架)，而不會阻塞渲染。
index.html
0
為什么 Vue + Astro 可能比 Vue SPA 更好
要了解為什么 Astro 在 UX 方面可以擊敗單頁應用程序，讓我們對網(wǎng)站加載時發(fā)生的情況進行簡化分解。
- index.html已經(jīng)加載。它沒有JS捆綁，但它包括你的服務器渲染的組件，所以用戶已經(jīng)可以看到你的網(wǎng)站內(nèi)容--只是還沒有互動。
- 組件所需的任何JS現(xiàn)在將以一系列獨立腳本的形式異步下載。
- 下載這些腳本后，它們將被解析并運行?，F(xiàn)在可以進行交互了。
現(xiàn)在讓我們想象一下，我們把這個網(wǎng)站重新建成一個單頁的應用程序。它現(xiàn)在會如何加載?
- index.html被加載。由于該頁面不包含任何內(nèi)容，用戶無法看到任何東西。瀏覽器將開始下載捆綁程序。
- 下載 JS 包后，瀏覽器就會對其進行解析。用戶仍然看不到任何東西。
- 一旦 JS 包被解析并運行，頁面內(nèi)容就生成了。用戶現(xiàn)在可以查看應用程序并與之交互。
簡單的說：Astro 網(wǎng)站幾乎可以立即提供可見的內(nèi)容，不像 SPA 需要先下載并運行 JS 包。
(Astro應用也會稍早提供互動性，因為它可能不需要下載那么多JS，因為沒有SPA外殼、路由器等)
最后的想法
Astro 的架構可能是比單頁應用程序更好的選擇，因為它無需 JavaScript 即可使內(nèi)容可見，并且僅在需要時加載 JS。
從理論上講，單頁應用程序可以通過預渲染和代碼拆分的組合來實現(xiàn)類似的效果。不同之處在于，Astro 網(wǎng)站默認以這種方式進行優(yōu)化，因為您需要選擇加入交互性和 JS。
當然，并不是每個應用程序都會從一這種架構中受益，因為 SPA 更適合某些類型的應用程序，例如高度動態(tài)和交互式的應用程序。所以我們不會期望 SPA 架構會消失。
原文：https://vuejsdevelopers.com/2021/10/26/vue-astro/
作者：Anthony Gore
網(wǎng)站標題：Vue.js+Astro比VueSPA更好嗎？
文章路徑：http://www.dlmjj.cn/article/dhehgsc.html
