Vite 打包后首屏加载太慢，怎么优化？

长孙培培提问于 2026-02-26 15:53:25 阅读 16

前端

我用 Vite + Vue3 开发了一个项目，本地开发时很快，但 build 之后首屏加载特别慢，Lighthouse 评分很低。我已经试过开启 brotli 压缩和分包，但效果不明显。

是不是我的组件没做懒加载？比如下面这个路由写法是不是有问题？

<script setup>
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue')
  }
]
const router = createRouter({ history: createWebHistory(), routes })
</script>

Vite 性能优化插件开发

我来解答赞 4 收藏

反馈

1 条解答

Mr-博文 Lv1

你路由写法没问题，组件懒加载是对的，问题不在这里。
首屏慢通常是因为没做代码分割后的预加载，或者打包产物太大没处理好。

先看几个关键点：

第一个，Vite 默认分包但不会预加载，你可以在 vite.config.js 里加个 manualChunks 或者用 build.rollupOptions 显式分包，比如这样改一下就行：

export default defineConfig({

  build: {

    rollupOptions: {

      output: {

        manualChunks(id) {

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

            return 'vendor'

          }

        }

      }

    }

  }

})

第二个，首屏关键资源建议用 prefetch 或 preload，比如你在 HTML 里加个 <link rel="prefetch" href="/assets/xxx.js">，或者在路由里用 meta: { prefetch: true } 配合插件自动加。

第三个，检查打包产物大小，用 vite-bundle-visualizer 插件跑一下，看看哪个依赖占了大头，比如 lodash、echarts 这类大包，换成 lodash-es 或按需引入。

还有个常见坑：别在入口文件里直接 import 大库，比如 import _ from 'lodash'，这种会整个打进去，改成 import debounce from 'lodash/debounce' 就行。

最后，如果用了 CDN，记得开启 HTTP2 + gzip + brotli，nginx 里 brotli 要装模块，不是光配个 gzip on 就完事。

你先按这些排查一遍，Lighthouse 能提 20 分以上。

2026-02-26 16:03