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

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

框架

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

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

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

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

我来解答赞 13 收藏

反馈

2 条解答

司空广利 Lv1

我之前也碰到过 Nuxt 首屏加载慢的问题，确实挺烦人。你已经在用一些不错的优化手段了，不过可以再试试这几个点。

先说个常见的，把 vite 里的 build.sourcemap 设为 false 是对的，但建议再加个 chunkingStrategy: "size"，这能帮你更好地拆分代码。

Nuxt 的静态资源预加载也要利用起来，在你的页面组件里加上 <link rel="preload" href="/_nuxt/xxx.js"> 这样的标签，特别是对首屏需要的关键脚本。

服务器端渲染部分也很关键。确保你的 API 请求足够快，最好能把文章数据直接在服务端获取完再返回页面。这样客户端就不需要等数据加载了。

另外你可以考虑用下 nuxt-lazy-load 插件来懒加载图片和非关键组件，这个插件配置简单效果不错。

最后检查一下第三方库的引入，有时候不经意间就带入了很多没必要的依赖。记得用 npm ls 查看项目依赖树，精简掉不用的包。

这几个方法结合着用，应该能明显改善你的 TTI 时间。调优这种事就是慢慢试，加油！

2026-03-26 23:05

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