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的使用，趁着今天休息把这个小需求记录下来，分享给之后有需要的各位同行！