jszip 解压压缩包_一文彻底弄懂jszip中的压缩与解压

最近在做一个类似离线包的需求，平时我们正常工作中是开发完成一个完整的SPA之后打包上线。由于我们暂时没有服务器的资源，所以目前采取的一个方案是把这个SPA打包为一个zip包，然后上传至CDN,别人用的时候直接从CDN拉包然后解压就可以了，这个方案类似于开发一套完整的离线包流程，其中用到了jszip这个在压缩领域最牛的库，其中也遇到了不少坑，特此总结记录一下。

常用API

官方文档已经很详细的给出了各种API的demo，但是只是很简单的demo，与我们开发中遇到的实际场景还是千差万别的，这个库牛逼的地方在于支持各种类型的资源uint8array,blob,arraybuffer,nodebuffer,string等，而且API都是promise风格，所以使用起来非常舒服，简单看几个例子，详情可去看文档；

const zip = new JSZip();

// create a file

zip.file("hello.txt", "Hello World\n");

// create a file and a folder

zip.file("nested/hello.txt", "Hello World\n");

zip.folder("nested").file("hello.txt", "Hello World\n");

// access the file content

zip.file("hello.txt").async("string").then(function (data) {

// data is "Hello World\n"

});

// remove a file or folder

zip.remove("nested/hello.txt");

zip.remove("nested");

// generate a zip file

var promise = null;

if (JSZip.support.uint8array) {

promise = zip.generateAsync({type : "uint8array"});

} else {

promise = zip.generateAsync({type : "string"});

}

// read a zip file

zip.loadAsync(content)

.then(function(zip) {

zip.file("hello.txt").async("string"); // a promise of "Hello World\n"

});

压缩资源

开发完成一个项目后一般会把资源打包到dist目录中，所以我们需要把dist整个文件夹最终打包为一个zip包，需要两步操作：读取dist目录中的每个文件；

function readDir(zip, dirPath) {

// 读取dist下的根文件目录

const files = fs.readdirSync(dirPath);

files.forEach(fileName => {

const fillPath = dirPath + "/" + fileName;

const file = fs.statSync(fillPath);

// 如果是文件夹的话需要递归遍历下面的子文件

if (file.isDirectory()) {

const dirZip = zip.folder(fileName);

readDir(dirZip, fillPath);

} else {

// 读取每个文件为buffer存到zip中

zip.file(fileName, fs.readFileSync(fillPath));

}

});

}生成一个压缩包；

function generateZip() {

const sourceDir = path.join(__dirname, "../dist");

readDir(zip, sourceDir);

zip.generateAsync({

type: "nodebuffer", // 压缩类型

compression: "DEFLATE", // 压缩算法

compressionOptions: { // 压缩级别

level: 9

}

}).then(content => {

const dest = path.join(__dirname, "../zip");

// 删除旧包目录

del.sync([dest])

// 创建新包目录

fs.mkdirSync(dest, {

recursive: true

});

// 把zip包写到硬盘中，这个content现在是一段buffer

fs.writeFileSync(`${dest}/lewis.zip`, content);

});

}

解压资源

需要使用该SPA的时候，直接从CDN拉取这个zip包进行解压即可使用，解压包同样分为两步操作：从CDN获取zip文件并解压；

function getZipFiles(zipUrl) {

const response = await axios({

method: 'get',

url: zipUrl,

responseType: 'arraybuffer' // 类型必须为arraybuffer

});

// loadAsync加载其他类型资源会出问题，比如资源乱码

const zipData = await JSZip.loadAsync(response.data);

return zipData.files;

}把解压后的资源写进硬盘；

function saveZipFiles(savePath) {

// 获取解压后的文件

const files = await getZipFiles(zipUrl)

try {

for (const filename of Object.keys(files)) {

const dest = path.join(__dirname, savePath, filename);

// 如果该文件为目录需先创建文件夹

if (files[filename].dir && !isDirSync(dest)) {

fs.mkdirSync(dest, {

recursive: true

});

} else {

// 把每个文件buffer写到硬盘中

files[filename].async('nodebuffer')

.then(content => fs.writeFileSync(dest, content));

}

}

} catch (error) {

console.error('save zip files encountered error!', error.message);

return error;

}

}

注意

处理zip包的整个过程建议直接都使用buffer，尽量避免用string，转来转去容易导致乱码问题，且buffer体积小易存储与jszip无缝处理，还有就是在上传CDN的时候也直接上传buffer，我当时转为字符串上传导致拉下来时解压包失败了，注意fs.readFileSync()的用法，加参数会返回字符串，直接读取一个zip包为字符串直接就是乱码的。

/**

* 获取文件内容

* @param file

* @returns string

*/

function getFileContent(file) {

if (fs.existsSync(file)) {

const pkg = fs.readFileSync(file, 'utf-8')

return pkg

} else {

return null

}

}

/**

* 获取文件内容

* @param file

* @returns buffer

*/

function getFileBuffer(file) {

if (fs.existsSync(file)) {

const pkg = fs.readFileSync(file)

return pkg

} else {

return null

}

}

后记

这个需求其实看似很简单，真正开发时在不同的场景里还是有些坑的，尤其在node开发时注意buffer的使用问题，避免一些非必要的字符串读写,还有就是node中一些同步API的使用，趁着今天休息把这个小需求记录下来，分享给之后有需要的各位同行！