nuxt-booster
nuxt-booster

nuxt-booster 將幫助您提高網站的 Lighthouse 效能得分 (100/100)。

分享我:

nuxt-booster

Nuxt Booster

mainnextSonarcloud Status

npm versionnpm downloads

TypeScriptRenovate - StatusLicense

Nuxt Booster 負責您的生成網站的 Lighthouse 效能最佳化。所有使用的元件和資源都根據視口按需載入。

入門

請遵循 📖   文件

要求

  • NodeJS >= 19
  • NuxtJS >= 3.5.0

功能

  • 基於視口的頁面資源(如字型、元件、圖片、影像和 iframe)的動態載入
  • 透過初始效能測量可選地阻止 javascript 執行
  • 透過消除不必要的 javascript 檔案來最佳化 javascript 檔案的初始載入
  • 防止載入當前視口之外的不必要資源(包括元件)。
  • 可選資訊層概念,用於在頻寬或硬體受損時告知使用者 UX 降低。
  • 全新的字型宣告方法
  • 最佳化後的圖片元件(支援基於視口的源,例如橫向/縱向)
  • 最佳化後的影像元件
  • 支援 SEO 友好的懶惰水合模式(圖片 + 影像)
  • 最佳化後的 youtube/vimeo 元件(不同解析度的自動生成的海報影像)

結果

  • 根據當前視口提供最少的所需資源
  • 如果您按照指定使用這些工具,您將獲得 100/100 的 Lighthouse 效能得分

📖   閱讀更多

瀏覽器支援

您可以將 nuxt-boosterInternet Explorer 11 瀏覽器一起使用。 在瀏覽器相容性中瞭解更多

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Samsung
Samsung
Opera
Opera
Vivaldi
Vivaldi
Edge最新 2 個版本最新 2 個版本最新 2 個版本最新 2 個版本最新 2 個版本最新 2 個版本最新 2 個版本

開發

  1. 克隆此倉庫。
  2. 使用 npm installyarn install 安裝依賴項。
  3. 使用 npm run devyarn dev 啟動開發伺服器。

預覽

  1. 克隆此倉庫。
  2. 使用 npm installyarn install 安裝依賴項。
  3. 使用 express 構建並啟動 npm run start:generateyarn start:generate
  4. 在瀏覽器中開啟 http://127.0.0.1:3000

或在這裡檢視

諮詢與支援

您是否需要進一步的支援、諮詢或程式碼審查,並願意支付適當的費用?請透過電子郵件聯絡我們:[email protected], [email protected]。我們期待您的請求。

許可證

麻省理工學院許可證