1. 为什么需要自动化生成zip压缩包在Vue3.0和Vite构建的项目中每次完成打包后都会生成dist目录里面包含了所有静态资源文件。但在实际部署时我们经常需要将这些文件打包成zip格式上传到服务器或者分发给其他团队成员。手动操作不仅效率低下还容易出错。想象一下每次打包后都要手动打开压缩软件、选择文件、设置压缩选项这个过程既枯燥又浪费时间。自动化生成zip压缩包的好处显而易见。首先它完全消除了人工操作环节避免了遗漏文件或压缩参数设置错误的问题。其次可以集成到CI/CD流程中实现从代码提交到部署包生成的全自动化。我在实际项目中就遇到过因为手动压缩漏掉关键文件导致部署失败的案例后来引入自动化方案后这类问题彻底消失。从技术实现角度看自动化压缩主要解决三个痛点一是确保每次压缩包含完整的dist内容二是可以灵活定制压缩包命名规则比如包含版本号、构建时间等三是能够无缝对接现有构建流程。接下来我们就看看两种主流实现方案的具体操作。2. 使用vite-plugin-zip-pack插件方案2.1 插件安装与基础配置vite-plugin-zip-pack是专门为Vite设计的压缩插件使用起来非常简单。首先通过npm安装开发依赖npm i -D vite-plugin-zip-pack然后在vite.config.ts中进行配置。这里有个小技巧我建议根据不同的环境development/staging/production生成不同的压缩包名称方便后续区分。配置示例如下import { defineConfig } from vite; import zipPack from vite-plugin-zip-pack; export default defineConfig(({ mode }) ({ plugins: [ zipPack({ inDir: dist, outFileName: dist-${mode}-${new Date().getTime()}.zip, outDir: dist-zip }) ], build: { outDir: dist } }));这个配置有几个实用点值得注意inDir指定要压缩的目录默认就是distoutFileName支持动态命名这里加入了构建模式和时间戳outDir可以指定压缩包输出目录避免和原始dist文件混在一起2.2 高级配置与优化技巧在实际使用中我发现插件还支持更多实用参数。比如可以设置压缩级别、排除特定文件等。下面是一个更完整的配置示例zipPack({ inDir: dist, outFileName: bundle.zip, pathResolver: (filePath) filePath.replace(/^dist\//, assets/), filter: (filePath) !filePath.includes(.map), level: 6 })这里用到了几个关键参数pathResolver可以重写压缩包内文件路径比如把所有文件移到assets目录下filter用于排除sourcemap等不需要的文件level控制压缩级别1-9数值越大压缩率越高但耗时越长有个实际踩过的坑要注意如果项目使用了动态路由需要确保压缩包保留了原始目录结构。有次我配置错误导致路由文件路径变化结果线上页面全部404。后来通过保留dist原始结构解决了问题。3. 基于archiver的自定义脚本方案3.1 基础环境搭建虽然插件方案简单但有时候我们需要更灵活的控制这时就可以使用archiver库来自定义压缩流程。首先安装所需依赖npm i -D archiver fs-extra types/archiver types/fs-extra dayjs这几个包各有用途archiver核心压缩库fs-extra增强的文件系统操作dayjs处理时间格式化新建一个buildZipPackage.ts脚本文件基础结构如下import fs from fs-extra; import archiver from archiver; import path from path; import dayjs from dayjs; const buildZip async () { // 具体实现代码 }; buildZip().catch(console.error);3.2 实现完整压缩逻辑完整的脚本实现需要考虑多个细节压缩进度显示、错误处理、文件命名规范等。下面是我在实际项目中打磨过的版本const OUTPUT_DIR dist; const PKG require(../package.json); const buildZip async () { console.log( 开始压缩 ${PKG.name} 项目...); const timestamp dayjs().format(YYYYMMDD-HHmm); const zipName ${PKG.name}-v${PKG.version}-${timestamp}.zip; const outputPath path.join(OUTPUT_DIR, zipName); // 确保dist目录存在 await fs.ensureDir(OUTPUT_DIR); const output fs.createWriteStream(outputPath); const archive archiver(zip, { zlib: { level: 9 } // 最高压缩级别 }); // 进度监听 output.on(progress, ({ processed }) { console.log( 已处理 ${processed} 个文件...); }); // 完成回调 output.on(close, () { const size (archive.pointer() / 1024 / 1024).toFixed(2); console.log(✅ 压缩完成总大小: ${size} MB); console.log( 压缩包位置: ${outputPath}); }); // 错误处理 archive.on(error, (err) { throw new Error(压缩失败: ${err.message}); }); archive.pipe(output); archive.directory(OUTPUT_DIR, false); await archive.finalize(); };这个脚本有几个亮点自动读取package.json中的项目信息在压缩包名称中加入版本号和精确到分钟的时间戳实时显示压缩进度详细的完成统计和错误处理3.3 集成到项目工作流为了让脚本更方便使用可以在package.json中添加快捷命令{ scripts: { build: vite build, build:zip: vite build ts-node ./scripts/buildZipPackage.ts, zip: ts-node ./scripts/buildZipPackage.ts } }这样开发人员可以运行npm run build:zip一次性完成构建和压缩单独运行npm run zip只进行压缩操作在CI/CD环境中还可以添加更多逻辑比如压缩完成后自动上传到服务器或者通过webhook通知相关人员。我在团队内部就实现了一个自动将压缩包发布到内网存储的服务大大简化了测试人员的获取流程。4. 两种方案的对比与选型建议4.1 功能对比通过实际项目验证我整理了两个方案的主要差异特性vite-plugin-zip-packarchiver脚本配置复杂度简单中等灵活性一般极高压缩包命名控制基础完全自定义目录结构控制有限完全控制进度反馈无可自定义实现额外依赖无需要多个包与构建流程集成度深度集成需要手动调用4.2 适用场景分析根据我的经验两种方案各有最适合的使用场景vite-plugin-zip-pack适合快速实现基础压缩需求项目结构简单不需要特殊处理希望保持配置最小化需要深度集成到Vite构建流程中archiver脚本适合需要精确控制压缩过程项目有特殊目录结构要求希望在压缩前后执行自定义逻辑需要集成到复杂的工作流中4.3 性能考量在大型项目中压缩性能也是重要考量因素。我专门做过测试对于一个包含3000文件、总大小约80MB的dist目录vite-plugin-zip-pack耗时约12秒archiver脚本级别9耗时约15秒archiver脚本级别6耗时约10秒如果追求速度可以适当降低压缩级别。另外有个小技巧通过archive.glob(**/*, { ignore: [**/*.map] })代替archive.directory()可以进一步优化性能特别是需要过滤文件时。