でかいデータのAjaxリクエストを圧縮して軽くしてPHPで受け取る

数MBくらいあるデータをリクエストボディに載せたいけど、少しは軽くしたいのでゴニョゴニョ。

JS側

import pako from 'pako'
import axios from 'axios'

const bigObject = { /* 超でかいObject */ }
const json = JSON.stringify(bigObject)
const gzipped = pako.gzip(json, { to: 'string' })
const base64Encoded = btoa(gzipped)
axios.post('/api/foo', { compressed: base64Encoded })

• JSONにする
• pako を使ってgzip圧縮する
• btoa() を使ってBase64エンコードする
• 文字列としてリクエストする

PHP側

$gzipBinary = base64_decode($_POST['compressed']);
$json = gzdecode($gzipBinary);
$data = json_decode($json, true);

• base64_decode() でbinaryにデコードする
• gzdecode() でgzipを解凍してJSON文字列にする
  • ext-zlib が必要
• json_decode() で配列にする

余計な処理は入るけど、リクエストボディが 1.5MB から 250KB くらいまでは小さくなったので満足。