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

Vite 构建速度优化：我被构建速度坑了3次后总结的实战技巧

news 2026/3/27 1:32:25

Vite 构建速度优化：我被构建速度坑了3次后总结的实战技巧

上个月我接手了一个 Vue3 项目，之前用的是 Webpack，每次修改代码都要等个 10 几秒才能热更新，切到 Vite 后确实快了不少，秒级热更新香得很。但好景不长，项目越来越大，我发现构建开始变慢了，打包一次要 3-5 分钟，开发体验反而变差了。我就开始怀疑人生了：说好的 Vite 很快呢？

后来我查了大量资料、踩了无数坑，终于把构建速度从 3 分钟降到了 30 秒。今天把这些实战经验分享出来，都是我踩过的坑，保证你看完就能用上。

第一个坑：依赖预构建没配置，白白等待

问题描述

项目首次启动时，Vite 会把node_modules里的 CommonJS 模块转换成 ESM，这个过程叫依赖预构建。第一次启动特别慢，修改package.json依赖后还要重新预构建，烦死了。

原因分析

Vite 默认只预构建直接 import 的包，而且每次依赖变化都要重新检测和预构建。如果你用了间接依赖（比如某个 UI 库内部用了 lodash），Vite 不会自动预构建它。

解决方案

在vite.config.ts中配置optimizeDeps.include和exclude：

// vite.config.tsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({plugins:[vue()],optimizeDeps:{// 预构建这些常用依赖，减少启动时间include:['vue','vue-router','pinia','axios','lodash','element-plus','@vueuse/core'],// 这些不需要预构建exclude:['lodash-es']}})

注意事项

只预构建大型库和常用库，不要把所有东西都加进去
lodash建议用lodash-es替代，它本身就是 ESM
依赖变更后会自动重新预构建，这个无法避免

第二个坑：代码没分割，所有东西打包成一个文件

问题描述

项目大了之后，所有代码都打包成一个巨大的 JS 文件，首屏加载要下载 2-3MB，网页打开要等好几秒。用户投诉不断，转化率都下降了。

原因分析

Vite 默认的 build rollupOptions.output 没有什么分割策略，所有代码按依赖顺序打成一个 chunk。你不配置，它就默认梭哈。

解决方案

配置手动代码分割，按路由和第三方库分开：

// vite.config.tsexportdefaultdefineConfig({build:{rollupOptions:{output:{manualChunks:{// Vue 全家桶单独一个包'vue-vendor':['vue','vue-router','pinia'],// UI 组件库单独一个包'ui-vendor':['element-plus','@vueuse/core'],// 其他第三方库单独一个包'utils-vendor':['axios','lodash','dayjs'],// 业务代码按页面对应（需要配置插件）}}},// 分割策略chunkSizeWarningLimit:1000,// 超过 1MB 才警告}})

对于路由级别的代码分割，配合 Vue Router 的动态导入：

// router/index.tsimport{createRouter,createWebHistory}from'vue-router'constroutes=[{path:'/',name:'Home',component:()=>import('@/views/Home.vue')// 懒加载},{path:'/about',name:'About',component:()=>import('@/views/About.vue')},{path:'/dashboard',name:'Dashboard',component:()=>import('@/views/Dashboard.vue')}]exportdefaultcreateRouter({history:createWebHistory(),routes})

效果对比

优化前	优化后
app.js: 2.5MB	app.js: 200KB
首屏加载: 5秒	首屏加载: 1秒
无进度条	有进度条

第三个坑：图片和静态资源没优化

问题描述

项目中有很多大图片（有的甚至 5MB+），构建时直接复制到 dist 目录，用户访问时加载特别慢。尤其是移动端，图片加载慢导致整体体验很差。

原因分析

Vite 默认不会压缩图片，也不会自动处理大图片。你放进去什么样，构建出来就什么样。

解决方案

安装vite-plugin-imagemin插件：

npminstallvite-plugin-imagemin-D

配置图片压缩：

// vite.config.tsimportviteImageminfrom'vite-plugin-imagemin'exportdefaultdefineConfig({plugins:[viteImagemin({gifsicle:{optimizationLevel:7,interlaced:false},optipng:{optimizationLevel:7},mozjpeg:{quality:20},pngquant:{quality:[0.8,0.9],speed:4},svgo:{plugins:[{name:'removeViewBox'},{name:'removeEmptyAttrs',active:false}]}})]})

对于大图片，还可以使用 WebP 格式：

// vite.config.tsexportdefaultdefineConfig({assetsInclude:['**/*.webp']})

在 HTML 中使用 WebP：

<picture><sourcesrcset="@/assets/hero.webp"type="image/webp"><imgsrc="@/assets/hero.jpg"alt="Hero"></picture>

资源内联阈值

对于小图片，可以配置内联，减少 HTTP 请求：

exportdefaultdefineConfig({build:{assetsInlineLimit:4096// 4KB 以下的内联}})

第四个坑：生产构建没优化，文件又大又慢

问题描述

开发时 Vite 很快，但生产构建打包出来的文件很大，加载很慢。用户访问首屏要等好几秒，体验很差。

原因分析

生产构建需要 minify、tree-shaking、source map 等优化，但 Vite 默认配置可能不够优。而且 sourcemap 在生产环境完全没必要，浪费时间。

解决方案

配置生产构建优化：

// vite.config.tsexportdefaultdefineConfig({build:{// 关闭 sourcemap，生产环境不需要sourcemap:false,// minify 选项：esbuild 最快（默认），terser 更小但更慢minify:'esbuild',// 分块策略chunkSizeWarningLimit:500,rollupOptions:{output:{// 手动分割代码块manualChunks:{'vue-vendor':['vue','vue-router','pinia'],'ui-vendor':['element-plus'],'utils-vendor':['axios','lodash']},// 文件名哈希化，防止缓存chunkFileNames:'assets/js/[name]-[hash].js',entryFileNames:'assets/js/[name]-[hash].js',assetFileNames:'assets/[ext]/[name]-[hash].[ext]'}},// 启用 CSS 代码分割cssCodeSplit:true,// 压缩级别（esbuild）target:'es2015'}})

对于更大的优化，可以考虑使用vite-plugin-compression开启 Gzip 压缩：

npminstallvite-plugin-compression-D

// vite.config.tsimportviteCompressionfrom'vite-plugin-compression'exportdefaultdefineConfig({plugins:[viteCompression({algorithm:'gzip',ext:'.gz',threshold:10240// 10KB 以上才压缩})]})

服务器端 Nginx 配置开启 Gzip：

gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; gzip_min_length 1000;