欢迎光临
技术人生-雨巷前端

前端请求数据过大的优化–gzip数据压缩

最近公司项目中,创建请求需要大量提交表单数据,数据巨大,达到5M++,无奈只好寻求数据压缩技术,对数据进行压缩优化,提升请求成功率及加载速度:

我们使用的vue spa应用模式,刚好有使用了基于promise的HTTP库–Axios,刚好axios中有transformRequest属性可以修改请求数据,再此处可以对请求数据进行压缩处理。

axios

gzip数据压缩

 

对js json对象及string压缩处理方法很多,

1、有node下函数库–zlib,使用详见;

先引入node 的zlib库:

const zlib = require('zlib')
//或 import zlib from 'zlib'
// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 300000, // 请求超时时间
  transformRequest: [
    // 复用原有的转换,实现json --> json string
    axios.defaults.transformRequest[0],
    (data, header) => {
      // 如果已处理过数据,则跳过
      if (!header['Content-Encoding']) {
        return data
      }
      // 如果数据长度1KB(如字符数据并不一定小于1KB),不压缩
      if (data.length < 1024) {
        return data
      }
      // 将数据压缩(可根据需要,只压缩长度大于多少的数据)
      // 设置数据类型
      header['Content-Encoding'] = 'gzip'
      const w = zlib.createGzip()
      w.end(Buffer.from(data))
      return w
    }
  ]
})

 

 

2、使用pako插件,也是基于node npm依赖安装:

npm install pako
引入插件:
const pako = require('pako')

使用压缩:(压缩后再进行base64转化)
// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 300000, // 请求超时时间
  transformRequest: [
    // 复用原有的转换,实现json --> json string
    axios.defaults.transformRequest[0],
    (data, header) => {
      // 如果数据长度1KB(如字符数据并不一定小于1KB),不压缩
      if (data.length < 1024) {
        return data
      }
      // 将数据压缩(可根据需要,只压缩长度大于多少的数据)
      // 设置数据类型
      header['Content-Encoding'] = 'gzip'
      const gzip = pako.gzip(data, { to: 'string' })
      // 进行base64转化
      return window.btoa(gzip)
     }
   ]
})

服务端处理

此处省略,前端这里就不多说了。。。

 

未经允许不得转载:技术人生 » 前端请求数据过大的优化–gzip数据压缩

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

我是前端,我不迷茫