Nuxt Vitalizer
作為一款專注一事的 Nuxt 模組,它彙集了各種變通方案,旨在最佳化 Google Lighthouse 和 Google PageSpeed Insights 中的最大內容繪製 (LCP)。
此模組為以下 Nuxt 問題(以及其他問題)提供解決方案
- 停用動態匯入的
prefetch
(#18376) - 分塊預取最佳化 (#14584)
inlineStyles
選項導致 CSS 重複 (#21821)
功能
- 🚀 零配置即可獲得更好的 LCP
- 🫸 移除渲染阻塞 CSS
設定
npx nuxi@latest module add nuxt-vitalizer
使用
將 Nuxt Vitalizer 新增到 Nuxt 配置中即可使用
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-vitalizer']
})
要自定義模組,請在 Nuxt 配置中配置 vitalizer
選項
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-vitalizer'],
vitalizer: {
// Remove the render-blocking entry CSS
disableStylesheets: 'entry'
}
})
LCP 最佳化功能
應用此模組的最佳化功能後,您可以獲得更高的 Lighthouse 效能分數
停用動態匯入的預取連結
!注意 此功能預設啟用。
大型 Nuxt 應用在 Lighthouse 和 Google PageSpeed Insights 中可能會因 HTML 中累積的 <link rel="prefetch">
標籤而導致效能分數不佳。
對於每個動態匯入(例如非同步元件和其他資源,如圖片),都會渲染一個 prefetch
連結。這會導致瀏覽器預取這些分塊,即使它們在當前頁面中不需要。雖然這對於應用的整體效能很有利,但它可能導致大量的預取請求,從而對最大內容繪製分數產生負面影響。
此模組會掛鉤到 Nuxt 構建過程,透過停用動態匯入的 prefetch
連結渲染來最佳化 LCP 分數。
停用預載入連結
!注意 此功能必須手動啟用。
預載入連結用於預載入當前頁面所需的關鍵資源。雖然它們通常在最佳化網站效能方面有一席之地,但如果使用不當,也可能導致大量的請求。移除預載入連結有助於提高 FCP(首次內容繪製)分數,尤其是在網路條件較差的情況下。
要移除預載入構建資源,請將 disablePrefetchLinks
選項設定為 true
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-vitalizer'],
vitalizer: {
disablePrefetchLinks: true
}
})
停止渲染阻塞 CSS
!注意 此功能必須手動啟用。要使用它,您需要啟用 Nuxt
inlineStyles
功能。請務必在啟用此選項後測試您的應用。
CSS 樣式表是渲染阻塞資源,這意味著瀏覽器必須在渲染頁面之前下載並解析 CSS。透過使用內聯樣式而不是載入樣式表,瀏覽器可以更快地渲染頁面,從而提高 LCP 分數。
雖然最新的 Nuxt 版本在 SSR 渲染期間會內聯樣式,但 entry.<hash>.css
樣式表仍會渲染到 HTML 中。這可能導致渲染阻塞 CSS,從而對最大內容繪製分數產生負面影響。
為什麼會這樣?正如 Nuxt 核心團隊成員 @danielroe 所解釋的
我認為這是當前內聯樣式實現的限制。
在您的應用中到處使用的樣式可以安全地從 CSS 源中完全移除。但僅在一個元件或頁面中使用的 CSS 需要同時存在於 CSS 檔案和內聯樣式中。
目前,vite 完全負責在客戶端載入 CSS,這意味著即使我們跟蹤了哪些 CSS 已經載入,我們也無法阻止 vite 載入包含重複 CSS 的 CSS 檔案。
這絕對是我希望看到修復的問題。
首先,嘗試在 app.vue
檔案中匯入主應用樣式。當 Nuxt 構建時,它們將儲存為 entry
CSS 檔案
// `app.vue`
import '~/assets/css/main.css'
現在,將 disableStylesheets
選項設定為 entry
以阻止 entry.<hash>.css
樣式表在 HTML 中渲染
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-vitalizer'],
vitalizer: {
disableStylesheets: 'entry'
}
})
模組選項
interface ModuleOptions {
/**
* Whether to remove prefetch links from the HTML. If set to `dynamicImports`, only dynamic imports will be removed. To disable all prefetching, such as images, set to `true`.
*
* @remarks
* This will prevent the browser from downloading chunks that may not be needed yet. This can be useful for improving the LCP (Largest Contentful Paint) score.
*
* @default 'dynamicImports'
*/
disablePrefetchLinks?: boolean | 'dynamicImports'
/**
* Whether to remove preload links from the HTML. This can be useful for improving the FCP (First Contentful Paint) score, especially when emulating slow network conditions.
*
* @default false
*/
disablePreloadLinks?: boolean
/**
* Whether to remove the render-blocking stylesheets from the HTML. This only makes sense if styles are inlined during SSR rendering. To only prevent the `entry.<hash>.css` stylesheet from being rendered, set to `entry`. If set to `true`, all stylesheet links will not be rendered.
*
* @remarks
* This requires to have the Nuxt `inlineStyles` feature enabled. Make sure to test your application after enabling this option.
*
* @default false
*/
disableStylesheets?: boolean | 'entry'
}
💻 開發
- 克隆此倉庫
- 使用
corepack enable
啟用 Corepack - 使用
pnpm install
安裝依賴 - 執行
pnpm run dev:prepare
- 使用
pnpm run dev
啟動開發伺服器
鳴謝
- 所有在 Nuxt GitHub issues 中啟發此模組的討論和貢獻。
許可證
MIT 許可 © 2024-PRESENT Johann Schopplich