nuxt-booster
nuxt-booster
nuxt-booster 將幫助您提高網站的 Lighthouse 效能得分 (100/100)。
Nuxt Booster
Nuxt Booster 負責您的生成網站的 Lighthouse 效能最佳化。所有使用的元件和資源都根據視口按需載入。
入門
請遵循 📖 文件
要求
- NodeJS
>= 19
- NuxtJS
>= 3.5.0
功能
- 基於視口的頁面資源(如字型、元件、圖片、影像和 iframe)的動態載入
- 透過初始效能測量可選地阻止 javascript 執行
- 透過消除不必要的 javascript 檔案來最佳化 javascript 檔案的初始載入
- 防止載入當前視口之外的不必要資源(包括元件)。
- 可選資訊層概念,用於在頻寬或硬體受損時告知使用者 UX 降低。
- 全新的字型宣告方法
- 最佳化後的圖片元件(支援基於視口的源,例如橫向/縱向)
- 最佳化後的影像元件
- 支援 SEO 友好的懶惰水合模式(圖片 + 影像)
- 最佳化後的 youtube/vimeo 元件(不同解析度的自動生成的海報影像)
結果
- 根據當前視口提供最少的所需資源
- 如果您按照指定使用這些工具,您將獲得 100/100 的 Lighthouse 效能得分
📖 閱讀更多
瀏覽器支援
您可以將
nuxt-booster
與 Internet Explorer 11 瀏覽器一起使用。 在瀏覽器相容性中瞭解更多
![]() IE / Edge | ![]() Firefox | ![]() Chrome | ![]() Safari | ![]() iOS Safari | ![]() Samsung | ![]() Opera | ![]() Vivaldi |
---|---|---|---|---|---|---|---|
Edge | 最新 2 個版本 | 最新 2 個版本 | 最新 2 個版本 | 最新 2 個版本 | 最新 2 個版本 | 最新 2 個版本 | 最新 2 個版本 |
開發
- 克隆此倉庫。
- 使用
npm install
或yarn install
安裝依賴項。 - 使用
npm run dev
或yarn dev
啟動開發伺服器。
預覽
- 克隆此倉庫。
- 使用
npm install
或yarn install
安裝依賴項。 - 使用 express 構建並啟動
npm run start:generate
或yarn start:generate
。 - 在瀏覽器中開啟 http://127.0.0.1:3000。
或在這裡檢視
諮詢與支援
您是否需要進一步的支援、諮詢或程式碼審查,並願意支付適當的費用?請透過電子郵件聯絡我們:[email protected], [email protected]。我們期待您的請求。