前端框架Astro實現最小化JavaScript

建立一個更快的網站有一個簡單的祕訣：更少的JS。

不幸的是，現代 Web 開發一直在朝著相反的方向發展——更多。更多的 JavaScript、更多的功能、更多的移動部件，最終需要更多的複雜性來保持一切順利執行。

今天，我很高興公開分享 Astro：一種新型靜態站點構建器，可提供閃電般的效能和現代開發人員體驗。為了設計 Astro，我們借鑑了我們最喜歡的工具的最佳部分，然後新增了一些我們自己的創新，包括：

• 自帶框架 (BYOF)：使用 React、Svelte、Vue、Preact、Web 元件或僅使用普通的 HTML + JavaScript 構建您的站點。
• 100% 靜態 HTML，無 JS： Astro 將您的整個頁面呈現為靜態 HTML，預設情況下從最終構建中刪除所有 JavaScript。
• 按需元件：當互動式元件在頁面上需要可見時需要一些 JS，Astro 可以自動對其進行融合。如果使用者從未看到它，他們永遠不會載入它。
• 功能齊全： Astro 支援 TypeScript、Scoped CSS、CSS Modules、Sass、Tailwind、Markdown、MDX 和任何您喜歡的 npm 包。
• 啟用 SEO：自動站點地圖、RSS 提要、分頁和集合消除了 SEO 的痛苦。

安裝

# create your project
mkdir new-project-directory
cd new-project-directory
npm init astro
# install your dependencies
npm install
# start the dev server and open your browser
npm start

Astro 的工作原理

Astro 的工作方式很像靜態站點生成器。如果您曾經使用過 Eleventy、Hugo 或 Jekyll（甚至是像 Rails、Laravel 或 Django 這樣的伺服器端 Web 框架），那麼您應該對 Astro 感到賓至如歸。

在 Astro 中，您可以使用來自您最喜歡的 JavaScript Web 框架（React、Svelte、Vue 等）的 UI 元件來構建您的網站。Astro 在構建期間將您的整個站點呈現為靜態 HTML。結果是一個完全靜態的網站，從最終頁面中刪除了所有 JavaScript。不需要單一的 JavaScript 應用程式，只需在瀏覽器中儘可能快地載入靜態 HTML，無論您使用多少 UI 元件來生成它。

當然，有時客戶端 JavaScript 是不可避免的。圖片輪播、購物車和自動完成搜尋欄只是需要在瀏覽器中執行一些 JavaScript 的幾個例子。這就是 Astro 真正閃耀的地方：當一個元件需要一些 JavaScript 時，Astro 只載入那個元件（以及任何依賴項）。您網站的其餘部分繼續作為靜態、輕量級的 HTML 存在。

在其他全棧 Web 框架中，如果不使用 JavaScript 載入整個頁面，延遲互動性，這種級別的每個元件優化是不可能的。在 Astro 中，這種部分水合作用內建於工具本身中。

您甚至可以自動推遲元件，使其僅在使用:visible修改器在頁面上可見時才載入。

這種 Web 架構的新方法稱為孤島架構。我們沒有創造這個詞，但 Astro 可能已經完善了這項技術。我們相信，HTML-first、JavaScript-only-as-needed 方法是大多數基於內容的網站的最佳解決方案。

Astro 由Snowpack和Skypack背後的開源開發團隊構建，並得到了社群的額外貢獻。

Astro 一直是免費的。它是一個在MIT 許可下發布的開源專案。