请求接口数据量大时进行gzip压缩优化

当我们在请求接口时，返回的数据量过大，会导致接口请求时间长、页面卡顿等问题。我们可以通过压缩数据来提高接口响应速度

组件预览地址： https://caisihang.gitee.io/vuepress/page/basicKnowledge/comps/gzip.html

安装

  npm i pako
  // 或者
  yarn add pako

引用

import pako from 'pako'

压缩

const zip = (str) => {
	var binaryString = pako.gzip(str, { to: 'string' });
	return btoa(binaryString);
}

解压

// Gzip 解压
const unzip = (b64Data) => {
  let strData = atob(b64Data);
  // const charData = strData.split('').map((x) => x.charCodeAt(0));
  const charData = strData.split(',').map((x) => x);
  const binData = new Uint8Array(charData);
  const data = pako.inflate(binData);
  strData = Utf8ArrayToStr(data);
  return strData;
};
/**
 * utf-8 Array 转化字符串
 * @param array Utf8Array
 * @returns {string}
 * @constructor
 */
const Utf8ArrayToStr = (array) => {
  const len = array.length;
  let out = '';
  let i = 0;
  let char1, char2, char3, char4;
  while (i < len) {
    char1 = array[i++];
    // 当单个字节时, 最大值 '01111111', 最小值 '00000000' 右移四位 07, 00
    // 当两个字节时, 最大值 '11011111', 最小值 '11000000' 右移四位 13, 12
    // 当三个字节时, 最大值 '11101111', 最小值 '11100000' 右移四位 14, 14
    if (char1 >> 4 <= 7) {
      out += String.fromCharCode(char1);
    } else if (char1 >> 4 === 12 || char1 >> 4 === 13) {
      char2 = array[i++];
      out += String.fromCharCode(((char1 & 0x1F) << 6) | (char2 & 0x3F));
    } else if (char1 >> 4 === 14) {
      char2 = array[i++];
      char3 = array[i++];
      char4 = ((char1 & 0x0F) << 12) | ((char2 & 0x3F) << 6);
      out += String.fromCharCode(char4 | ((char3 & 0x3F) << 0));
    }
  }
  return out;
};