Vue3 + vite 首屏优化加载速度

1.使用路由懒加载(异步加载)

当访问到当前页面，再去加载

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

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

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

export default router

这样只打包当前访问的组件，首屏包更小，速度更快。

2.使用defineAsyncComponent异步加载组件

import { defineAsyncComponent } from 'vue'

const LazyChart = defineAsyncComponent(() => import('./Chart.vue'))

可用于图表、地图、大型列表、富文本编辑器等组件

3.压缩静态资源（gzip / brotli）

npm install vite-plugin-compression -D

// vite.config.ts
import compression from 'vite-plugin-compression'

export default {
  plugins: [
    compression({
      algorithm: 'gzip', // 或 brotliCompress
      ext: '.gz'
    })
  ]
}

可以把 JS/CSS 从几百 KB 压缩到几十 KB，浏览器自动解压

4. 使用 SSR（服务端渲染）或 SSG（预渲染）

对于 SEO 要求高或首屏复杂的页面，可以用：

• SSR：服务端渲染，推荐使用 Nuxt 或 vite-plugin-ssr
• SSG：预渲染 HTML 页面，使用 vite-plugin-prerender

npm i vite-plugin-prerender -D

5. 图片优化与懒加载

1）压缩图片，使用 webp 格式

2）大图懒加载：

<img v-lazy="url" /> <!-- 使用 vue-lazyload 插件 -->

或手动：

<img :src="show ? url : placeholder" @load="onLoad" />

6. 移除不必要的依赖和 console

// vite.config.ts
export default {
  esbuild: {
    drop: ['console', 'debugger']
  }
}

7. 开启浏览器缓存 + CDN 提升加载速度

-   把打包文件缓存加 hash（Vite 默认有）

-   使用 CDN 托管 `index.html`、图片、JS 包等静态资源

8. 预加载关键资源

使用 <link rel="preload"> 优先加载关键 JS/CSS

<link rel="preload" href="/src/main.js" as="script">

9. 骨架屏优化感知性能

使用骨架屏在加载时替代内容，提升“感知速度”

<Skeleton v-if="loading" />
<RealContent v-else />

10. 分析构建包体积

npm install rollup-plugin-visualizer -D

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [visualizer()]
}

然后运行 vite build → 查看打包中哪些包太大可优化