大きなデータを圧縮してサーバーに渡したい

Route handlersを使っているので、4.5MB以上のリクエストを送れないが、送りたい場合が出てきた
本来バックエンドをRouter handlersから別にするべきだが、時間がかかる上にかなりデグレの心配があるのでより時間が少なそうなデータ圧縮のアプローチを行うことにした

piesuke

圧縮技術の選定

pako
fflate
CompressionStream

piesuke

依存関係を増やしたくないのでWeb標準のCompressionStreamを使ってみる

piesuke

こんなノリ

const compress = async (data: Record<string, unknown>): Promise<string> => {
  const compressedConfig = JSON.stringify(data);
  const encoder = new TextEncoder();
  const encodedData = encoder.encode(compressedConfig);

  try {
    const compressedData = await new Response(
      new Blob([encodedData]).stream().pipeThrough(new CompressionStream('gzip')),
    ).arrayBuffer();

    return arrayBufferToBase64(compressedData);
  } catch (error) {
    console.error('compressConfig error', error);
    throw error;
  }
};

piesuke

その名の通りテキストをエンコードする. Uint8Arrayの形式でエンコード

8ビット整数値の配列

piesuke

エンコードする必要ないな

piesuke

こんなノリ

const compress = async (data: Record<string, unknown>): Promise<string> => {
  const compressedConfig = JSON.stringify(data);

  try {
    const compressedData = await new Response(
      new Blob([compressedConfig]).stream().pipeThrough(new CompressionStream('gzip')),
    ).arrayBuffer();

    return arrayBufferToBase64(compressedData);
  } catch (error) {
    console.error('compressConfig error', error);
    throw error;
  }
};

piesuke