Vue.js + Astro 比 Vue SPA 更好嗎？
最近有很多開發(fā)者宣布他們已經(jīng)將網(wǎng)站遷移到Astro。這通常伴隨著一張接近完美的Lighthouse分數(shù)的截圖和一系列火箭表情符號。
像大多數(shù)人一樣，我發(fā)現(xiàn)無休止的新框架會讓人感到厭倦。但我對Astro做了一些研究，認為它真的值得一試。
在本文中，我將向您展示如何使用 Astro 構(gòu)建基于 Vue 的應(yīng)用程序，我們將了解其獨特的架構(gòu)如何帶來比單頁應(yīng)用程序 (SPA) 更好的性能。
SPA 架構(gòu)回顧
在我們看到 Astro 的實際應(yīng)用之前，我們需要了解它的架構(gòu)。為此，讓我們首先提醒自己單頁應(yīng)用架構(gòu)的優(yōu)缺點。
SPA 將網(wǎng)站的所有功能和內(nèi)容抽象為 JavaScript 組件。這很棒，因為它使網(wǎng)站的開發(fā)變得容易。
這種方法的缺點是當網(wǎng)站投入生產(chǎn)時。所有這些JavaScript組件被捆綁在一起成為一個大的應(yīng)用程序。由于體積太大，瀏覽器下載和運行的速度可能會很慢。
當然，你可以通過代碼拆分來優(yōu)化這個捆綁。但是，瀏覽器仍然會有一些前期成本必須支付，只是為了啟動網(wǎng)站。
<!-- 典型的 SPA 頁面 -->
<head>
<script src="/app.js"></script>
</head>
<body>
<!-- 在 app.js 加載之前，此頁面沒有有意義的內(nèi)容 -->
<div id="app"></div>
</body>
Islands architectureIslands
架構(gòu)，Astro使用的架構(gòu)，也使用了組件。然而，與單頁應(yīng)用程序不同的是，這些組件并沒有捆綁到一個 JavaScript 包中。
相反，每個組件都被視為一個獨立的迷你應(yīng)用程序，與所有其他組件隔離存在。
例如，如果您的頁面有一個基于 JavaScript 的導航欄，那將是一個迷你應(yīng)用程序。如果它還具有 JavaScript 驅(qū)動的圖像輪播，那就是另一個迷你應(yīng)用程序。等等。
但是，如果這些組件沒有被捆綁，它們?nèi)绾伪话陧椖恐?我將在下一節(jié)解釋這個問題。
<!-- Islands architecture -->
<body>
<MyNavBar /> <!-- navbar mini app -->
<main>
<MyCarousel /> <!-- carousel mini app -->
<div class="content">
<!-- more page content... -->
</div>
</main>
</body>
服務(wù)器渲染的組件
Astro 主要是一個靜態(tài)站點生成器。它適用于大多數(shù)支持服務(wù)器渲染組件的 UI 庫，包括 Vue、Svelte、Preact、React 和 Lit。
因此，當Astro構(gòu)建你的應(yīng)用程序時，每個JavaScript組件都在服務(wù)器端加載，內(nèi)容是”快照“。這個快照被添加到靜態(tài)頁面上。
服務(wù)器渲染不是 Astro 特有的功能，但在 SPA 中這是一個可選功能，而在 Astro 中，這是一個至關(guān)重要的功能，我們將在下面看到。
<!-- 開發(fā)內(nèi)容 -->
<body>
<MyForm /> <!-- JS component -->
</body>
<!-- 快照內(nèi)容 -->
<body>
<form> <!-- Server rendered JS component -->
<input type="text" >
<!-- ... -->
</form>
</body>
Progressive hydration
這就是Astro的神奇之處——通過islands架構(gòu)、服務(wù)器渲染組件和漸進式水合的組合。
由于我們的頁面被劃分為服務(wù)器渲染的迷你應(yīng)用程序，互動層(JS)可以獨立加載，并且只在需要的時候加載。
例如，您可能有一個交互式表單。此表單位于頁面下方，位于視口之外。
表單是服務(wù)器渲染的，所以我們在頁面上看到它。但是，在用戶將其滾動到視圖中之前，不需要加載昂貴的 JavaScript。
這就是 Astro 中“漸進式水合作用”的含義——我們只在需要時加載 JavaScript。
建立一個 Vue + Astro 項目
現(xiàn)在理論已經(jīng)講完了，讓我們來看看它的實際效果吧!
要開始創(chuàng)建 Astro 項目，我們將首先創(chuàng)建一個目錄：
$ mkdir vue-astro
然后運行Astro 安裝向?qū)В?/p>
$ npm init astro
安裝向?qū)⒃试S我們選擇“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';
---
<html lang="en">
<head>
<!-- ... -->
<title>{title}</title>
</head>
<body>
<main>
<!-- ... -->
<VueCounter client:visible />
</main>
</body>
</html>
Astro 具有單文件組件樣式，與 Vue 類似，但有一些重要區(qū)別。
首先，在文件的頂部，我們看到似乎是前端內(nèi)容，即用 --- 劃定的內(nèi)容。這是在服務(wù)器端運行的JavaScript。這不會被發(fā)送到客戶端。
在這里我們可以看到兩件重要的事情：首先，我們正在導入一個Vue組件(你可以從任何支持的框架中導入組件)。另外，我們正在設(shè)置一個值：title。
這里聲明的所有變量在模板中都是可用的。你會注意到 title 在模板中以類似JSX的語法進行插值。
src/pages/index.astro
---
...
let title = 'My Astro Site';
---
<html lang="en">
<head>
<!-- ... -->
<title>{title}</title>
</head>
<!-- ... -->
接下來，注意模板中聲明的組件。
默認情況下，組件在客戶端是不交互的，只是由Astro進行服務(wù)器渲染。
如果我們想讓組件交互，即加載 JavaScript，我們需要給它一個指令告訴客戶端何時加載它。
在這種情況下，client:visible 指令告訴 Astro 當組件在頁面中可見時使 VueCounter交互。
如果發(fā)生這種情況，Astro 將從服務(wù)器請求該組件的 JS 并對其進行水合。
---
import VueCounter from '../components/VueCounter.vue';
...
---
<html lang="en">
<head><!-- ... --></head>
<body>
<main>
<!-- ... -->
<VueCounter client:visible />
</main>
</body>
</html>
加載Astro
現(xiàn)在讓我們運行 Astro 的開發(fā)服務(wù)器來查看我們的項目。
npm run dev
在頁面的源代碼中，你會看到在文檔中沒有任何的JavaScript捆綁! 不過，我們確實看到了服務(wù)器渲染的Vue組件。
我們還看到 Astro 在文檔正文的底部添加了一個腳本。在這里，它加載了一個模塊來水合 Vue 組件。
該模塊將下載 Vue 組件和依賴項(Vue 框架)，而不會阻塞渲染。
index.html
<!-- Page source -->
<body>
<!-- server rendered component -->
<div id="vue" class="counter">
<button>-</button>
<pre>0</pre>
<button>+</button>
</div>
<!-- 添加的代碼片段以水合 Vue 組件 -->
<script type="module">
import setup from '/_astro_frontend/hydrate/visible.js';
// ...
</script>
為什么 Vue + Astro 可能比 Vue SPA 更好
要了解為什么 Astro 在 UX 方面可以擊敗單頁應(yīng)用程序，讓我們對網(wǎng)站加載時發(fā)生的情況進行簡化分解。
- index.html已經(jīng)加載。它沒有JS捆綁，但它包括你的服務(wù)器渲染的組件，所以用戶已經(jīng)可以看到你的網(wǎng)站內(nèi)容--只是還沒有互動。
- 組件所需的任何JS現(xiàn)在將以一系列獨立腳本的形式異步下載。
- 下載這些腳本后，它們將被解析并運行。現(xiàn)在可以進行交互了。
現(xiàn)在讓我們想象一下，我們把這個網(wǎng)站重新建成一個單頁的應(yīng)用程序。它現(xiàn)在會如何加載?
- index.html被加載。由于該頁面不包含任何內(nèi)容，用戶無法看到任何東西。瀏覽器將開始下載捆綁程序。
- 下載 JS 包后，瀏覽器就會對其進行解析。用戶仍然看不到任何東西。
- 一旦 JS 包被解析并運行，頁面內(nèi)容就生成了。用戶現(xiàn)在可以查看應(yīng)用程序并與之交互。
簡單的說：Astro 網(wǎng)站幾乎可以立即提供可見的內(nèi)容，不像 SPA 需要先下載并運行 JS 包。
(Astro應(yīng)用也會稍早提供互動性，因為它可能不需要下載那么多JS，因為沒有SPA外殼、路由器等)
最后的想法
Astro 的架構(gòu)可能是比單頁應(yīng)用程序更好的選擇，因為它無需 JavaScript 即可使內(nèi)容可見，并且僅在需要時加載 JS。
從理論上講，單頁應(yīng)用程序可以通過預(yù)渲染和代碼拆分的組合來實現(xiàn)類似的效果。不同之處在于，Astro 網(wǎng)站默認以這種方式進行優(yōu)化，因為您需要選擇加入交互性和 JS。
當然，并不是每個應(yīng)用程序都會從一這種架構(gòu)中受益，因為 SPA 更適合某些類型的應(yīng)用程序，例如高度動態(tài)和交互式的應(yīng)用程序。所以我們不會期望 SPA 架構(gòu)會消失。
原文：https://vuejsdevelopers.com/2021/10/26/vue-astro/
作者：Anthony Gore
