vue.jsでzlib.jsを利用して圧縮データをPOSTしてみた

問題

aws lambdaへCSVファイルをPOSTする際にペイロードが6MBに制限されているため、クライアント側で圧縮する方法を調査してみました。
lambdaのペイロード制限に関しては下記に記載があります。
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/gettingstarted-limits.html

事前準備

zlibjsというライブラリを利用するため、下記のコマンドでインストールを行います。
npm i zlibjs --save

実装例

<template>
  <div id="app">
    <form>
      <label>ファイル:</label>
      <input type="file" @change="onChange" /><br />

      <button @click="onSubmit">送信</button>
    </form>
  </div>
</template>

<script>
import {Zlib} from 'zlibjs/bin/gzip.min'

export default {
  name: 'App',
  data() {
    return {
      file: null,
      type: {
        1: 'zip',
        2: 'gzip',
      }
    }
  },
  methods: {
    onChange(e) {
      e.preventDefault()
      this.file = e.target.files[0]
    },
    onSubmit(e) {
      e.preventDefault()
      const reader = new FileReader()
      reader.readAsArrayBuffer(this.file)
      reader.onload = async() => {
        const plain = new Uint8Array(reader.result)
        const gzip = new Zlib.Gzip(plain).compress()
        console.log(gzip)

        const params = {
          data: btoa(String.fromCharCode(...gzip))
        }
        // axiosなどでPOST
        // axios.post(URL, params)
      }
    }
  }
}
</script>

まとめ

zlibjsを利用してクライアント側で簡単にgzip圧縮することができました。
テキストファイルであれば大きくファイルサイズを落とせるため、通信にかかる時間も少なくできます。
（圧縮にかかる時間はプラスされるのでどちらがベストかは環境によって要検証）

サーバサイドが100%lambdaの構成になっている場合などで選択肢として検討するのは良いかもしれません。