Vite中TypeScript项目压缩优化需同时启用Terser代码压缩和gzip/Brotli静态资源压缩：前者通过build.minify='terser'及drop_console等选项深度清理JS，后者借助vite-plugin-compression生成.gz/.br文件，配合关闭source map、Tree Shaking和图片压缩等措施，可使产物体积减少40%以上。
在 TypeScript 项目中用 Vite 配置压缩插件，核心是两件事：启用代码压缩 + 启用静态资源（如 JS/CSS）的 gzip/brotli 压缩。这两步配合能显著减小部署包体积，尤其对首屏加载速度提升明显。
启用 Terser 深度压缩 JS 代码
Vite 默认用 esbuild 压缩，但对 TypeScript 项目，Terser 更适合做深度优化（比如移除 console、内联常量、删除未使用函数等）。
- 在
vite.config.ts的build配置中指定minify: 'terser' - 通过
terserOptions.compress开启关键清理项，例如drop_console: true和drop_debugger: true - 若需保留部分 console（如 warn/error），可改用正则过滤：
pure_funcs: ['console.log']配合drop_console: false精细控制
添加 gzip / brotli 静态资源压缩
这一步不压缩源码，而是在构建后为 .js/.css/.html 等文件生成 .gz 或 .br 副本，由 Nginx/Apache 或 CDN 自动返回给支持的浏览器，实测可再降 60–70% 体积。
- 安装插件：
pnpm add vite-plugin-compression -D（推荐 pnpm；npm/yarn 同理） - 在
plugins数组中引入并配置，例如启用 gzip 并只压缩 ≥5KB 的文件：threshold: 5120 - 如需更高压缩率，可额外加
vite-plugin-compression2支持 brotli（.br 文件），现代浏览器兼容性良好
配合其他打包瘦身手段效果更佳
单靠压缩插件不够，需和以下配置联动：
-
关闭 source map：生产环境设
build.sourcemap = false，避免生成巨大 .js.map 文件 -
调整 assetsDir：统一静态资源输出路径（如
assetsDir: 'static'），方便 CDN 批量缓存和压缩策略管理 -
启用 rollup 的 Tree Shaking：确保 ES Module 规范导入（不用
import _ from 'lodash'，改用import debounce from 'lodash/debounce'） -
图片资源提前压缩：用
vite-plugin-imagemin或构建前用脚本处理，避免原图直接打进 dist
配置完成后运行 pnpm build，检查 dist 目录是否生成 .gz 文件，并用 vite-bundle-visualizer 插件分析包构成，针对性删减大依赖。实际项目中，gzip + terser 组合常使最终产物缩小 40% 以上。
