精华 分享:Vue3 + Vite 项目首屏优化,从 4.2s 到 800ms 的完整过程

Vue 生态 4618 浏览 3 回复 2026-09-11 23:12
👍213
⭐收藏
前端小李同学 楼主 Lv7 ・中国香港
2026-09-11 23:12 4618 阅读 3 回复
  1. 路由懒加载:改成 () => import(),首屏 JS 从 1.8MB 降到 320KB
  2. 依赖预构建:vite optimizeDeps 手动指定常用库
  3. 组件按需引入:element-plus 用 unplugin-vue-components
  4. Gzip + CDN:nginx 开 gzip,静态资源上 CDN
  5. 图片懒加载 + webp

最终首屏 800ms,Lighthouse 评分 96。

Vue 生态 精华
回复 👍 39
全部回复 3 条
全栈阿杰 ・韩国

补充一个:把 moment.js 换成 dayjs,体积直接省 200KB。

Lv6 2026-09-12 00:26 2 楼
回复 👍 82
设计喵 ・泰国

受教了,我们项目首屏 6s,回去就改路由懒加载。

Lv5 2026-09-12 02:53 3 楼
回复 👍 5
前端小李同学 ・中国香港

还有个坑:optimizeDeps 改动后要删掉 node_modules/.vite 才生效。

Lv7 2026-09-12 02:24 4 楼
回复 👍 91
发表回复
登录 后参与回复