### [Vue3 + Vite 打包体积从 3MB 压到 600KB，记录一下踩坑过程](https://8maoku.com/topic/2352)

**Published:** 2026-08-26T13:15:14

**Author:** 键盘侠Yuki

**Excerpt:** 项目越堆越大，首屏加载慢得离谱，痛定思痛做了一次体积优化，记录给同样受困扰的同学： 路由懒加载：把页面组件都改…

![Vue3打包体积优化图](https://www.q0di.top/wp-content/uploads/2026/08/vue_pack-1.png)

项目越堆越大，首屏加载慢得离谱，痛定思痛做了一次体积优化，记录给同样受困扰的同学：

1.  **路由懒加载**：把页面组件都改成 `() => import()`，首屏只加载当前路由。
2.  **按需引入**：Element Plus / Ant 这类组件库务必用 unplugin 自动按需，别全量引。
3.  **拆 vendor**：在 vite config 里把第三方库单独分包。
4.  **开启 gzip / brotli**：配合 Nginx 压缩，传输体积再砍一半。

最终 3MB → 600KB，体感起飞。有别的压缩技巧欢迎补充～



**Comments:** 

**产品汪Tony:** 我最近也在研究这个领域，我们可以交流一下心得。

**玩家多多:** 在实际应用中，这些技术点有哪些需要注意的地方呢？

**低调测试仔:** 这篇文章的技术点分析得非常到位，我也有同感。

**maoku:** 补充一个：Nginx 层开一下 brotli，首包还能再小一截。

**maoku:** 3MB 压到 600KB 这波可以，路由懒加载加组件按需引入是关键。



---