Vue 3 项目首屏加载慢，核心在于减少首屏必须加载的 JavaScript 代码量。最推荐的处理方向是分析打包产物后实施代码分割，通过路由懒加载和第三方库按需引入减少初始请求体积，适合基于 Vite 或 Webpack 构建的单页应用。

1. 分析打包产物

在优化前必须先知道大文件在哪里。安装可视化插件并配置到 Vite 中：

npm install rollup-plugin-visualizer `--save-dev`

修改 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: true,
      filename: 'stats.html',
      gzipSize: true
    })
  ]
})

运行 npm run build，构建完成后会自动打开 stats.html 文件，重点关注体积最大的 chunk 是业务代码还是第三方库。

2. 配置路由懒加载

检查路由配置文件，确保每个路由组件都使用动态导入语法。不要直接 import 组件，而是使用函数返回 import。在 router/index.js 中：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

这样 Vite 或 Webpack 会将该组件单独打包成一个文件，仅在访问该路由时加载。

3. 组件异步加载

对于首屏非关键的大型组件（如图表、富文本编辑器），可以使用 Vue 3 的 defineAsyncComponent 进行异步加载：

<script setup>
import { defineAsyncComponent } from 'vue'

const ChartComponent = defineAsyncComponent(() =>
  import('@/components/BigChart.vue')
)
</script>

注意配合 Suspense 或 loading 状态展示，避免页面闪烁。

4. 第三方库按需引入

如果使用 Element Plus 或 Ant Design Vue 等 UI 库，默认会全量引入。推荐安装 unplugin-vue-components 实现自动按需导入：

npm install -D unplugin-vue-components

在 vite.config.js 中配置：

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

配置后，模板中使用的组件会自动按需引入样式和脚本，无需手动 import。

5. 开启压缩传输

确保服务器开启了 Gzip 或 Brotli 压缩。在 Vite 项目中可以使用 vite-plugin-compression 插件在构建时生成压缩文件：

npm install -D vite-plugin-compression

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    vue(),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
})

怎么验证是否生效

打开浏览器开发者工具的 Network 面板，勾选 Disable cache 选项，刷新页面。观察首屏加载阶段请求的 JS 文件数量和大小。优化后，主入口文件的体积应该明显减小，同时会出现多个按需加载的 chunk 文件。也可以对比 Lighthouse 性能评分中的 Reduce JavaScript execution time 指标是否有改善。

常见坑

1. 切片过细

不要将每个组件都拆分成独立文件，过多的 HTTP 请求会增加网络延迟。建议按路由或功能模块进行粗粒度拆分。

2. 预加载策略缺失

懒加载会导致切换路由时有等待时间。可以使用 link rel="prefetch" 或 "preload" 策略，在空闲时提前加载可能需要的资源，但这会增加初始流量消耗。

3. SSR hydration mismatch

如果项目使用了服务端渲染，异步组件的配置不当可能导致 hydration 不匹配警告。需确保服务端和客户端的组件加载逻辑一致。

4. 外部 CDN 稳定性

将大型库外链到 CDN 虽然能减小本地包体积，但依赖第三方服务的稳定性。如果 CDN 加载失败，页面可能完全不可用，需评估风险。