Vue3 + vite 首屏优化加载速度

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

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

javascript 复制代码
// 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异步加载组件

javascript 复制代码
import { defineAsyncComponent } from 'vue'

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

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

3.压缩静态资源(gzip / brotli)

复制代码
npm install vite-plugin-compression -D
javascript 复制代码
// 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:服务端渲染,推荐使用 Nuxtvite-plugin-ssr
  • SSG:预渲染 HTML 页面,使用 vite-plugin-prerender
css 复制代码
npm i vite-plugin-prerender -D

5. 图片优化与懒加载

1)压缩图片,使用 webp 格式

2)大图懒加载:

xml 复制代码
<img v-lazy="url" /> <!-- 使用 vue-lazyload 插件 -->

或手动:

ini 复制代码
<img :src="show ? url : placeholder" @load="onLoad" />

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

arduino 复制代码
// vite.config.ts
export default {
  esbuild: {
    drop: ['console', 'debugger']
  }
}

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

markdown 复制代码
-   把打包文件缓存加 hash(Vite 默认有)

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

8. 预加载关键资源

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

ini 复制代码
<link rel="preload" href="/src/main.js" as="script">

9. 骨架屏优化感知性能

使用骨架屏在加载时替代内容,提升"感知速度"

ini 复制代码
<Skeleton v-if="loading" />
<RealContent v-else />

10. 分析构建包体积

sql 复制代码
npm install rollup-plugin-visualizer -D
javascript 复制代码
// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [visualizer()]
}

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

相关推荐
程序视点3 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian4 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0014 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴4 小时前
Smoothstep
前端·webgl
若梦plus5 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员5 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉5 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
若梦plus5 小时前
Webpack中微内核&插件化思想的应用
前端·webpack
若梦plus5 小时前
微内核&插件化设计思想
前端
柯北(jvxiao)5 小时前
搞前端还有出路吗?如果有,在哪里?
前端·程序人生