Nuxt项目首屏加载太慢，该怎么优化？

Prog.玉楠提问于 2026-03-02 01:07:20 阅读 6

框架

我用 Nuxt 3 搭了个博客，部署后发现首屏白屏时间特别长，Lighthouse 跑出来 TTI 都快 5 秒了。页面其实没多少内容，就是首页拉个文章列表。

试过开 experimental.renderJsonPayloads，也用了 defineAsyncComponent 拆分组件，但效果不明显。是不是哪里配置错了？或者还有哪些关键的优化点没考虑到？

这是我的 nuxt.config.ts 里关于性能的部分：

export default defineNuxtConfig({
  experimental: {
    renderJsonPayloads: true,
    asyncContext: true
  },
  vite: {
    build: {
      sourcemap: false
    }
  }
})

我来解答赞 8 收藏

反馈

1 条解答

IT人艳青 Lv1

TTI 5秒确实有点离谱了，博客首页加载文章列表理论上应该很快。按照规范来说，Nuxt 3 的性能优化主要从打包产物、渲染策略和缓存三个维度入手。

先说几个容易被忽略的点。

第一，检查你的依赖包体积。很多时候首屏慢是因为不小心引入了巨大的第三方库。在 nuxt.config.ts 里加上 build analyzer 看看到底打包了什么：

export default defineNuxtConfig({

  modules: ['@nuxtjs/fontaine'],

  vite: {

    build: {

      sourcemap: false,

      rollupOptions: {

        output: {

          manualChunks(id) {

            if (id.includes('node_modules')) {

              return 'vendor'

            }

          }

        }

      }

    }

  }

})

然后跑一下 npx nuxi analyze 看看哪个包最大，我之前就遇到过不小心把 moment.js 全量引入的情况，一个库就 300KB。

第二，routeRules 缓存必须配置。这是官方文档明确推荐的，你现在的配置里完全没有缓存策略：

export default defineNuxtConfig({

  routeRules: {

    '/': { swr: 3600 },

    '/**': { swr: 3600 }

  }

})

SWR（Stale-While-Revalidate）对博客这种内容不频繁更新的场景非常合适，首屏渲染会直接返回缓存，速度能提升一个数量级。

第三，图片和字体。如果文章列表有缩略图，确保用了 @nuxt/image 模块做优化，不要直接用原始 <img> 标签。字体用 @nuxtjs/google-fonts 或者本地 woff2，避免阻塞渲染。

第四，确认你的部署模式。如果是 SSR 动态渲染，每次请求都要服务端跑一遍，肯定会慢。博客这种静态内容多的项目，建议用 nuxi generate 做预渲染，或者配置混合渲染：

export default defineNuxtConfig({

  nitro: {

    prerender: {

      routes: ['/']

    }

  }

})

最后补充一点，defineAsyncComponent 对首屏优化帮助有限，因为它主要是延迟加载，服务端渲染时还是会执行。真正有效的是减少首屏需要的组件和数据量，把非关键内容用 <ClientOnly> 包起来，比如评论区、分享按钮这些。

建议先跑 analyzer 定位问题，大概率是某个大依赖或者缓存没配好。

2026-03-02 01:08