Vite打包构建优化：从配置到实战，这些设置帮你把项目体积降下来
打包构建优化，说白了就两大块：一是让打包出来的东西更小、更好用，二是让打包这个过程跑得更快。
这篇文章咱们把常用的优化配置挨个过一遍，有代码，有说明，用的时候直接复制改改就行。
准备工作
先说一下环境判断。有些配置只在生产环境才需要，比如关掉sourceMap、代码混淆这些。开发环境要是也搞这些，调试起来就麻烦了。
所以我们在vite.config.ts里先判断一下当前是什么环境：
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), 'VITE_')
// 判断是不是生产环境，后面很多配置会用到
const isProd = mode === 'prod'
return {
// 配置都写在这里
}
})代码压缩和混淆
代码压缩就是去掉空格、注释、没用到的代码，把变量名变短，让文件变小。混淆就是让别人看不懂你的代码逻辑。
Vite里用build.minify来控制压缩。有几个选项：
esbuild：Vite默认的，压缩速度非常快，但压缩率比Terser差一点。如果你更在意构建速度，用这个就行，啥都不用配。
terser：老牌压缩工具，压缩效果好，选项也多，但速度慢一些。对包体积有极致要求的话选这个。
false：不压缩。
如果你想用terser，先装依赖：
pnpm add terser -D然后在vite.config.ts里配置：
export default defineConfig(({ mode }) => {
const isProd = mode === 'prod'
return {
build: {
minify: 'terser',
sourcemap: !isProd, // 生产环境关掉sourcemap
terserOptions: isProd ? {
compress: {
drop_console: true, // 去掉console
drop_debugger: true, // 去掉debugger
},
mangle: {
toplevel: true, // 混淆顶层变量名
eval: true, // 混淆eval里的变量
},
format: {
comments: false, // 去掉注释
},
} : {},
},
}
})资源压缩（Gzip）
代码压缩完还不够，还可以再压一层。用Gzip或者Brotli把文件再压小一点，网络传输更快。
用vite-plugin-compression2这个插件，可以自动生成.gz或.br文件。
安装：
pnpm add vite-plugin-compression2 -D配置：
import { compression } from 'vite-plugin-compression2'
export default defineConfig({
plugins: [
compression({
algorithms: ['gzip'],
threshold: 10240, // 超过10KB的文件才压缩
deleteOriginalAssets: false, // 不删原文件
}),
],
})图片优化
图片也是大头。用vite-plugin-image-optimizer可以在打包时自动压缩图片，还能转格式。
安装：
pnpm add vite-plugin-image-optimizer -D配置：
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
export default defineConfig({
plugins: [
ViteImageOptimizer({
png: { quality: 80 },
jpeg: { quality: 80 },
webp: { quality: 80 },
}),
],
})依赖预构建
用optimizeDeps配置一下常用的依赖。Vite在开发服务器启动时会把它们提前构建成ES模块，省得每次都要转，开发体验会好一点。
export default defineConfig({
optimizeDeps: {
include: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
},
})输出目录配置
规范一下打包出来的目录结构：
export default defineConfig({
build: {
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 静态资源目录
assetsInlineLimit: 4096, // 小于这个大小的图片转base64
reportCompressedSize: true, // 打包完显示压缩后的大小
},
})CSS代码分割
这个默认就是开的。把CSS按组件拆开，首屏只加载需要的样式，而不是一个巨大的CSS文件。
export default defineConfig({
build: {
cssCodeSplit: true, // 默认就是true，不写也行
},
})JS代码分割
通过manualChunks手动指定哪些依赖打包到一起。比如把vue、vue-router、pinia这些核心库打成一个vendor文件，业务代码单独打，这样改业务代码的时候vendor不用重新下载。
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router', 'pinia'],
},
},
},
},
})兼容性处理
如果项目需要跑在老浏览器上，可以用@vitejs/plugin-legacy生成兼容代码。
安装：
pnpm add @vitejs/plugin-legacy -D配置：
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
})打包分析
想知道打包出来的东西里什么最大？用rollup-plugin-visualizer生成一个分析图，一目了然。
安装：
pnpm add rollup-plugin-visualizer -D配置：
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
visualizer({
filename: 'stats.html', // 生成的文件名
}),
],
})跑完打包后，打开生成的stats.html就能看到各个模块的大小占比，哪里该优化一眼就看清了。
最后
上面这些配置，按需取用就行。不是每个项目都要全部加上。
如果项目对加载速度要求高，terser压缩、Gzip、图片优化、代码分割这几个是一定要搞的。如果只是内部工具，可能压缩一下就够了。
还有一点：配置加多了，打包速度会变慢。这是个取舍问题。看项目情况，找到适合自己的平衡点就行。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！