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 → 查看打包中哪些包太大可优化

相关推荐
天天进步20152 分钟前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言1 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手1 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言2 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友3 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手3 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿3 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜053 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau4 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin