前端使用 snappyjs 压缩数据并解压

温其如玉_zxh

已于 2023-10-22 17:06:30 修改

阅读量564

点赞数

文章标签： javascript github

于 2023-10-19 14:06:51 首次发布

本文链接：https://blog.csdn.net/m0_53808238/article/details/133923703

版权

本文介绍了如何在项目中安装和使用SnappyJS库，包括通过npm和Bower安装，以及如何在实际场景中进行数据的压缩和解压，特别强调了由于SnappyJS依赖ArrayBuffer，所以涉及二进制数据的转换。

摘要由CSDN通过智能技术生成

一、安装

github地址

使用 npm

npm install snappyjs

使用 bower

bower install snappyjs

安装完成后使用下面的方法引入，看项目需求，个别页面用到，局部引入即可。

import SnappyJS from 'snappyjs'

也可以使用下面的方法引入（不推荐）。

const SnappyJS = require('snappyjs')

二、压缩与解压

压缩和解压很简单，按照 github 上文档操作如下。

// 压缩
SnappyJS.compress(buffer)
// 解压
SnappyJS.uncompress(compressed)

如此简单的文档，想来不是大家希望看到的。确实，单纯的压缩和解压就是这样操作，但文档中提到了这样一段话。

SnappyJS relies on ArrayBuffer. All major browsers support it now (http://caniuse.com/#feat=typedarrays). Also, as I tested, SnappyJS has high performance on latest version of Google Chrome, Safari, Firefox, and Microsoft Edge.

这个插件仅支持对二进制文件进行压缩和解压，所以需要对数据进行二进制转换与还原。

所以，真正的使用方法如下：

1. 压缩

// 转为二进制文件并压缩
const compressed = (data) => {
	const jsonString = JSON.stringify(data)
	const encoder = new TextEncoder()
	const arrayBuffer = encoder.encode(jsonString)
	return SnappyJS.compress(arrayBuffer)
}

2. 解压

// 解压并还原为原始数据
const uncompressed = (data) => {
	const decoder = new TextDecoder()
	const arrayBuffer = SnappyJS.uncompress(data)
	const jsonString = decoder.decode(arrayBuffer)
	return JSON.parse(jsonString)
}