前言

最近做项目时，有个需要，使用vue3+vite技术栈打包构建完之后，需要将打包后的生成的目录(目录情况下是dist目录)在进行打包压缩成zip文件

分析问题

1. 需求很简单就是将构建生成的dist目录压缩成zip文件。
2. 在vite构建完成后的生命周期，通过Node相关模块对dist目录压缩成zip文件

解决

1. 新建一个vue3+ts项目: rollup-plugin-compression（过程省略）
2. 在项目的入口index.ts定义一个函数,函数放回一个对象，对象中一个 closeBundle 函数，closeBundle函数就是vite生命周期函数，在vite构建完成后关闭服务后会执行这个函数
3. 核心逻辑就在 closeBundle 函数中写, 将dist目录打包压缩成zip文件
4. 具体代码在gitee仓库中。可查看rollup-plugin-compression

使用

安装

npm install rollup-plugin-compression -D

使用

// vite.config.ts
import compresssionBuild from "rollup-plugin-compression";
import type { ICompressionOptions } from "rollup-plugin-compression";
const option: ICompressionOptions = {
  sourceName: `dist`,
  type: "zip",
  targetName: `dist-name`
};
export default defineConfig({
  plugins: [vue(), compresssionBuild(option)]
});

效果

执行命令

npm run build

可以看到已经将dist目录压缩成zip了

总结

1. 这个需求还算简单，思路清晰，压缩文件的核心逻辑用到了Node及相关模块
2. 需要了解Vite的生命周期，在closeBundle生命周期函数执行压缩逻辑即可
3. 代码仓库:https://gitee.com/codercjx/rollup-plugin-compression.git
4. 如果哪里有需要优化的评论区留言