一文彻底弄懂jszip中的压缩与解压 |
您所在的位置：网站首页 › jszip压缩文件夹 › 一文彻底弄懂jszip中的压缩与解压 |
| 一文彻底弄懂jszip中的压缩与解压 2020-07-14 11:46:58 本文彻底弄懂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的使用，趁着今天休息把这个小需求记录下来，分享给之后有需要的各位同行！ 一次微前端的探索实践之旅→ |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |