當前位置: 妍妍網 > 碼農

VitePress 1.0 正式釋出:Vue 團隊出品的現代化靜態站點生成器!

2024-03-22碼農

大家好,我是 CUGGZ。

3 月 21 日, 由 Vue 團隊出品的現代化靜態站點生成器 VitePress 正式釋出 1.0 版本!它專為構建快速、以內容為中心的網站而生,能夠輕松地將使用 Markdown 格式撰寫的原始檔內容轉化為靜態 HTML 頁面,支持部署到任何平台。

VitePress 基於 Vite 和 Vue 構建,是 VuePress 的精神繼承者和現代替代品。

使用場景

  • 文件編寫 :VitePress 內建專為技術文件打造的預設主題,為 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等計畫的文件提供了支持。Vue.js 的官方文件也基於 VitePress 構建,並透過自訂主題實作多語言版本的無縫切換。

  • 部落格、作品集與行銷網站 :VitePress支持完全自訂的主題,並具備標準Vite + Vue應用程式的開發體驗。由於基於 Vite 構建,還可以輕松利用 Vite 生態中的各類外掛程式。更值得一提的是,VitePress提供了靈活的 API,支持本地或遠端數據載入,並在構建階段動態生成路由。只要數據在構建時是確定的,幾乎可以用 VitePress 來構建任何型別的網站。

  • 開發者體驗

    VitePress 旨在為處理 Markdown 內容提供出色的開發者體驗。

  • Vite 驅動 :實作秒速啟動伺服器,每次編輯都能即時反映在頁面上(<100ms),無需重新載入頁面。

  • 內建 Markdown 擴充套件 :前置數據、表格、語法高亮等一應俱全,滿足多樣化的文件編寫需求。特別是針對程式碼塊的處理,VitePress 提供了眾多高級特性,使其成為技術文件編寫的理想選擇。

  • Vue 增強的 Markdown :借助 Vue 樣版與 HTML 的完美相容,每個 Markdown 頁面都能成為 Vue 單檔元件。這意味著可以利用 Vue 的樣版特性或匯入的元件,為靜態內容增添豐富的互動性,提升使用者體驗。

  • 效能

    與許多傳統 SSG(靜態站點生成器)不同,VitePress 生成的網站在首次存取時提供靜態 HTML,但在網站內部進行後續導航時,它會變成一個單頁應用程式(SPA)。這種模型為效能提供了最佳平衡:

  • 快速初始載入: 首次存取任何頁面時,都會提供靜態的、預渲染的 HTML,以加快載入速度和最佳化 SEO。然後頁面會載入一個 JavaScript 包,將頁面轉換為 Vue SPA(即「水合作用」)。與大家對 SPA 水合作用通常的緩慢假設相反,由於 Vue 3 的原始效能和編譯器最佳化,這一過程實際上非常快。典型的 VitePress 網站在 PageSpeed Insights 中即使在低端行動裝置和慢速網路環境下也能獲得接近完美的效能評分。

  • 快速載入後導航: 更重要的是,SPA 模型在初始載入後為使用者提供了更好的體驗。在網站內部進行後續導航時,不再需要整個頁面重新載入。相反,會獲取目標頁面的內容並進行動態更新。VitePress 還會自動為視口內的連結預取頁面塊。在大多數情況下,載入後的導航會感覺非常快。

  • 無縫的互動體驗: 為了能夠水合靜態 Markdown 中嵌入的動態 Vue 部份,每個 Markdown 頁面都被視為一個 Vue 元件並編譯成 JavaScript。這聽起來可能效率不高,但 Vue 編譯器足夠智慧,能夠分離靜態和動態部份,從而最小化水合成本和有效載荷大小。對於初始頁面載入,靜態部份會自動從 JavaScript 有效載荷中消除,並在水合過程中跳過。

  • VitePress 官網 :https://vitepress.dev/