当前位置：首页 > news >正文

Vue 3 项目首屏加载慢如何优化打包体积？

news 2026/5/14 2:44:31

Vue 3 项目首屏加载慢，核心在于减少首屏必须加载的 JavaScript 代码量。最推荐的处理方向是分析打包产物后实施代码分割，通过路由懒加载和第三方库按需引入减少初始请求体积，适合基于 Vite 或 Webpack 构建的单页应用。

先说结论：优化打包体积的核心在于减少首屏必须加载的 JavaScript 代码量，而不是盲目压缩所有文件。

先定位：使用可视化插件分析打包产物，确认体积最大的模块来源。
先做：优先配置路由懒加载和 UI 组件库按需引入，这两项收益最稳定。
再验证：对比优化前后的 Network 面板资源大小，确认首屏请求数变化。

1. 分析打包产物

在优化前必须先知道大文件在哪里。安装可视化插件并配置到 Vite 中：

npm install rollup-plugin-visualizer `--save-dev`

修改 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'export default defineConfig({plugins: [vue(),visualizer({open: true,filename: 'stats.html',gzipSize: true})]
})

运行 npm run build，构建完成后会自动打开 stats.html 文件，重点关注体积最大的 chunk 是业务代码还是第三方库。

2. 配置路由懒加载

检查路由配置文件，确保每个路由组件都使用动态导入语法。不要直接 import 组件，而是使用函数返回 import。在 router/index.js 中：

import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',name: 'Home',component: () => import('@/views/Home.vue')},{path: '/about',name: 'About',component: () => import('@/views/About.vue')}
]const router = createRouter({history: createWebHistory(),routes
})export default router

这样 Vite 或 Webpack 会将该组件单独打包成一个文件，仅在访问该路由时加载。

3. 组件异步加载

对于首屏非关键的大型组件（如图表、富文本编辑器），可以使用 Vue 3 的 defineAsyncComponent 进行异步加载：

<script setup>
import { defineAsyncComponent } from 'vue'const ChartComponent = defineAsyncComponent(() =>import('@/components/BigChart.vue')
)
</script>

注意配合 Suspense 或 loading 状态展示，避免页面闪烁。

4. 第三方库按需引入

如果使用 Element Plus 或 Ant Design Vue 等 UI 库，默认会全量引入。推荐安装 unplugin-vue-components 实现自动按需导入：

npm install -D unplugin-vue-components

在 vite.config.js 中配置：

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [vue(),Components({resolvers: [ElementPlusResolver()]})]
})

配置后，模板中使用的组件会自动按需引入样式和脚本，无需手动 import。

5. 开启压缩传输

确保服务器开启了 Gzip 或 Brotli 压缩。在 Vite 项目中可以使用 vite-plugin-compression 插件在构建时生成压缩文件：

npm install -D vite-plugin-compression

import viteCompression from 'vite-plugin-compression'export default defineConfig({plugins: [vue(),viteCompression({verbose: true,disable: false,threshold: 10240,algorithm: 'gzip',ext: '.gz'})]
})

怎么验证是否生效

打开浏览器开发者工具的 Network 面板，勾选 Disable cache 选项，刷新页面。观察首屏加载阶段请求的 JS 文件数量和大小。优化后，主入口文件的体积应该明显减小，同时会出现多个按需加载的 chunk 文件。也可以对比 Lighthouse 性能评分中的 Reduce JavaScript execution time 指标是否有改善。