How to manually gzip files for web and Amazon CloudFront

Question

I have a 3MB .wasm file which I'm trying to compress using gzip and used on Amazon CloudFront. Currently CloudFront doesn't support auto compressing .wasm file types.

I used gzip filename.wasm but the outputted result isn't working in my code when fetched from CloudFront. I read elsewhere that the file is missing some file headers.

So my question is, how can I manually gzip a .wasm file for use on web and fetched from CloudFront?

Thanks!

Answer 1

You can compress the file with gzip, and upload it to s3 using --content-type application/wasm --content-encoding gzip, without the .gz suffix. When this file is then served through cloudfront, it will be returned gzipped and readable by the browser.

Here is an example using brotli:

WASM_FILE=$(ls dist/ | grep '.wasm$');
brotli-cli dist/*.wasm
BROTLI_FILE=$(ls dist/ | grep wasm.br);
mv dist/$BROTLI_FILE dist/$WASM_FILE

aws s3 cp dist/*.wasm s3://$S3_BUCKET/ \
  --content-encoding br \
  --content-type application/wasm