10 MByte を超えるような大きめのファイルを brotli で事前に圧縮して s3 に upload し CloudFront で配信する。
dycoonbevy の最小のコードを wasm に出力したとしても 20 MByte あたりを超えてしまい、
通信時間が長くなるので対策を考えたい。
brotli などブラウザが対応しているフォーマットで圧縮することで 5 MByte 程度に小さくなるが、
bevy 周辺のツールでは圧縮するような機能は特に用意されていなさそうである。
おそらく Web Server や CDN での圧縮が想定されていると思われる。
私は AWS S3 と Cloudfront をよく利用しているので、この構成で行こうと思ったが、
1,000 ～ 10,000,000 byte つまり 10 MByte あたりを超える容量になると CloudFront では圧縮できない。
dycoon代わりの方法としては
CloudFrontでBrotli圧縮したコンテンツを配信してみた の記事にある 3. オリジンで静的にBrotli圧縮 - S3で静的配信 をとってみた。
圧縮については brotli command を利用した。
dycoon以下のような形で特定のフォルダ内のファイルをすべて圧縮した。
find out/* -type f | sed -e "s/out\///" | xargs --replace='{}' -n1 brotli -f -6 -o 'out_brotli/{}' 'out/{}'
brotli に関係するコマンドは以下のとおりである。
brotli -f -6 -o 'out_brotli/{}' 'out/{}'
-6 はどの程度圧縮するかを表す値だが、このくらいの値にすると圧縮速度は gzip とあまり変わらず、容量も gzip より小さくなる。
以下実験内容
mkdir -p tmp/out/
time gzip -c out/simple-bevy_bg.wasm > tmp/out/simple-bevy_bg.wasm.gz
# real 0m0.881s
du -h tmp/out/simple-bevy_bg.wasm.gz
# 7.1M tmp/out/simple-bevy_bg.wasm.gz
time brotli -f -1 -o tmp/out/simple-bevy_bg_1.wasm.br out/simple-bevy_bg.wasm
# real 0m0.270s
du -h tmp/out/simple-bevy_bg_1.wasm.br
# 7.3M tmp/out/simple-bevy_bg_1.wasm.br
time brotli -f -2 -o tmp/out/simple-bevy_bg_2.wasm.br out/simple-bevy_bg.wasm
# real 0m0.201s
du -h tmp/out/simple-bevy_bg_2.wasm.br
# 6.5M tmp/out/simple-bevy_bg_2.wasm.br
time brotli -f -3 -o tmp/out/simple-bevy_bg_3.wasm.br out/simple-bevy_bg.wasm
# real 0m0.222s
du -h tmp/out/simple-bevy_bg_3.wasm.br
# 6.4M tmp/out/simple-bevy_bg_3.wasm.br
time brotli -f -4 -o tmp/out/simple-bevy_bg_4.wasm.br out/simple-bevy_bg.wasm
# real 0m0.528s
du -h tmp/out/simple-bevy_bg_4.wasm.br
# 6.0M tmp/out/simple-bevy_bg_4.wasm.br
time brotli -f -5 -o tmp/out/simple-bevy_bg_5.wasm.br out/simple-bevy_bg.wasm
# real 0m0.760s
du -h tmp/out/simple-bevy_bg_5.wasm.br
# 5.7M tmp/out/simple-bevy_bg_5.wasm.br
time brotli -f -6 -o tmp/out/simple-bevy_bg_6.wasm.br out/simple-bevy_bg.wasm
# real 0m1.055
du -h tmp/out/simple-bevy_bg_6.wasm.br
# 5.6M tmp/out/simple-bevy_bg_6.wasm.br
time brotli -f -7 -o tmp/out/simple-bevy_bg_7.wasm.br out/simple-bevy_bg.wasm
# real 0m1.962s
du -h tmp/out/simple-bevy_bg_7.wasm.br
# 5.5M tmp/out/simple-bevy_bg_7.wasm.br
time brotli -f -8 -o tmp/out/simple-bevy_bg_8.wasm.br out/simple-bevy_bg.wasm
# real 0m3.522s
du -h tmp/out/simple-bevy_bg_8.wasm.br
# 5.4M tmp/out/simple-bevy_bg_8.wasm.br
time brotli -f -9 -o tmp/out/simple-bevy_bg_9.wasm.br out/simple-bevy_bg.wasm
# real 0m6.194s
du -h tmp/out/simple-bevy_bg_9.wasm.br
# 5.4M tmp/out/simple-bevy_bg_9.wasm.br
time brotli -f -Z -o tmp/out/simple-bevy_bg_z.wasm.br out/simple-bevy_bg.wasm
# real 0m49.315s
du -h tmp/out/simple-bevy_bg_z.wasm.br
# 4.8M tmp/out/simple-bevy_bg_z.wasm.br
圧縮レベルを最大にすると小さくなるが、時間がかなりかかるので、開発時などは抑えておくほうがよい。
dycoon一旦 brotli に対応していないブラウザのことは考えずに Lambda Edge で Accept-Encoding に応じてレスポンスを分岐する対応はしなかった。
以下のようなコマンドですでに brotli 圧縮したファイルとして s3 にアップロードした。
export DEPLOY_PATH="(contents path)"
aws s3 sync --content-encoding "br" ./out_brotli "s3://******/$DEPLOY_PATH" --delete