分享：

Nuxt Booster

• ✨   發布說明
• 👁   預覽

Nuxt Booster 接管您產生的網站的 Lighthouse 效能優化。所有使用的元件和資源都會根據可視區域按需載入。

開始使用

請參考 📖   文件

• v2: basics.github.io/nuxt-booster/v2/

需求

• NodeJS >= 19
• NuxtJS >= 3.5.0

功能

• 動態載入基於可視區域的頁面資源，例如字型、元件、圖片、影像和 iframe
• 可選擇透過初始效能測量來阻止 JavaScript 執行
• 透過消除不必要的 JavaScript 檔案來優化 JavaScript 檔案的初始載入
• 防止載入目前可視區域之外的不必要資源（包括元件）。
• 可選的資訊層概念，在頻寬或硬體受損時通知使用者 UX 體驗降低。
• 全新的字型宣告方法
• 優化圖片元件（支援基於可視區域的來源，例如橫向/縱向）
• 優化影像元件
• 支援 SEO 友好的延遲水合模式（圖片 + 影像）
• 優化 YouTube/Vimeo 元件（自動產生不同解析度的海報圖像）

結果

• 根據目前的可視區域交付所需的最小資源
• 如果您按照指定的工具使用，您將獲得 100/100 的 Lighthouse 效能評分

📖   閱讀更多

瀏覽器支援

您可以在 Internet Explorer 11 瀏覽器中使用 nuxt-booster。 在瀏覽器相容性了解更多

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

開發

1. 複製此儲存庫。
2. 使用 npm install 或 yarn install 安裝相依性。
3. 使用 npm run dev 或 yarn dev 啟動開發伺服器。

預覽

1. 複製此儲存庫。
2. 使用 npm install 或 yarn install 安裝相依性。
3. 使用 express 建置並啟動 npm run start:generate 或 yarn start:generate。
4. 在瀏覽器中開啟 http://127.0.0.1:3000。

或查看這裡

• 預覽

諮詢與支援

您是否需要進一步的支援、諮詢或程式碼審查（需支付合理費用）？請透過電子郵件聯繫我們：stephan.gerbeth@gmail.com, lammpee@gmail.com。我們期待您的請求。

授權

MIT 授權