作为冉冉博客的技术分享系列，今天深入探讨Nuxt.js 性能优化指南。这些技巧在我的博客运营过程中都经过实战验证，希望能帮到你。
一、Nuxt.js 服务端渲染基础
Nuxt.js 是 Vue 生态中最强大的服务端渲染框架，它结合了 Vue 的响应式优势和 SSR 的 SEO 友好特性。理解 Nuxt.js 的渲染模式是性能优化的前提。
1.1 三种渲染模式对比
// nuxt.config.ts
export default defineNuxtConfig({
// SSR（服务端渲染）- SEO友好，首屏快
ssr: true,
// SPA（单页应用）- 客户端渲染，交互丰富
ssr: false,
// 混合模式 - 部分页面 SSR，部分 SPA
routeRules: {
'/': { ssr: true },
'/dashboard': { ssr: false },
'/blog/**': { swr: 3600 } // 静态生成 + 增量再生成
}
})1.2 Nuxt 3 与 Nuxt 2 的性能差异
// Nuxt 3 基于 Vite 构建，编译速度提升 100 倍
// Nuxt 3 使用 Rollup 按需编译
// Nuxt 3 原生支持 TypeScript 和 Composition API
// 组件自动导入
// 不需要手动 import，组件会被自动扫描并注册
// pages/index.vue - 自动注册为页面组件
// components/Header.vue - 自动注册为 <Header />二、路由懒加载与代码分割
Nux t.js 的路由懒加载能显著减少首屏加载时间。每个页面都会自动分割成独立的 JS chunk，只有访问时才加载。
2.1 路由分组与预加载
// nuxt.config.ts
export default defineNuxtConfig({
app: {
router: {
options: {
// 预加载所有页面
prefetchLinks: true
}
}
}
})
// 手动预加载特定页面
const route = useRoute()
await navigateTo('/dashboard', { force: true })
// 路由分组共享布局
// pages/blog/ 和 pages/admin/ 可以有不同布局2.2 组件级代码分割
<!-- 动态组件懒加载 -->
<template>
<LazyHeavyChart v-if="showChart" />
<LazyDataTable :data="items" />
</template>
// 使用 defineAsyncComponent 细粒度控制
const AsyncHeavyModal = defineAsyncComponent({
loader: () => import('./HeavyModal.vue'),
delay: 200,
timeout: 3000
})三、图片与资源优化
图片通常是页面体积的最大来源。Nuxt 提供了 @nuxt/image 模块，自动处理图片格式转换、尺寸适配和懒加载。
3.1 Nuxt Image 最佳实践
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
format: ['webp', 'avif'],
quality: 80,
screens: {
xs: 320,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
xxl: 1536
}
}
})
// 使用 <NuxtImg> 组件
<NuxtImg
src="/hero.jpg"
width="800"
height="600"
format="webp"
loading="lazy"
placeholder
alt="Hero image"
/>3.2 字体优化
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
link: [
{
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'
}
]
}
},
css: ['~/assets/fonts/main.css']
})
/* 使用 font-display: swap 避免FOIT */
@font-face {
font-family: 'Inter';
font-display: swap;
src: url('/fonts/Inter.woff2') format('woff2');
}四、缓存策略与状态管理
合理的缓存策略能大幅减少服务端负载。Nuxt 3 的 useFetch 和 useAsyncData 提供了开箱即用的数据缓存。
4.1 数据缓存配置
// 页面级缓存
export default defineNuxtRouteMiddleware((to, from) => {
// 设置页面缓存时间
const cache = useRuntimeConfig()
if (cache.public.cachePages) {
// 使用 SWR 策略，1小时后台静默刷新
}
})
// 组件级数据缓存
const { data: posts } = await useAsyncData('posts', () =>
$fetch('/api/posts'),
{
// 客户端缓存时间（毫秒）
getCachedData(key, nuxtApp) {
return nuxtApp.payload.data[key] ||
nuxtApp.static.data[key]
}
}
)4.2 状态管理优化
// 使用 useState 替代 Pinia（简单场景）
const user = useState('user', () => null)
// Pinia 持久化（避免页面刷新后状态丢失）
// stores/user.ts
export const useUserStore = defineStore('user', {
state: () => ({ name: '', token: '' }),
actions: {
async fetchUser() {
const res = await $fetch('/api/user')
this.name = res.name
this.token = res.token
}
},
persist: {
key: 'user',
storage: persistedState.localStorage
}
})五、生产环境部署与监控
性能优化不能止步于开发环境，生产环境的部署和监控同样重要。
5.1 Nitro 服务器配置
// nuxt.config.ts
export default defineNuxtConfig({
nitro: {
// 压缩
compressPublicAssets: true,
// 资源内联阈值
inlineDynamicImports: ['tiny-warning'],
// 预设部署平台
preset: 'node-server',
// 预渲染静态页面
prerender: {
crawlLinks: true,
routes: ['/', '/about', '/blog']
}
}
})5.2 性能监控集成
// plugins/web-vitals.client.ts
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hooks.hook('app:mounted', () => {
import('web-vitals').then(({ getCLS, getFID, getLCP }) => {
getCLS(sendToAnalytics)
getFID(sendToAnalytics)
getLCP(sendToAnalytics)
})
})
function sendToAnalytics({ name, delta, id }) {
// 上报到监控平台
fetch('/api/metrics', {
method: 'POST',
body: JSON.stringify({ name, delta, id })
})
}
})以上就是 Nuxt.js 性能优化指南的完整分享。这些技巧都来自冉冉博客的实战经验，希望能帮到你。有问题欢迎留言交流！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容