react-scripts build を改善していく
create-react-app を使ってて、react-scripts build
してbuildディレクトリにバンドル結果が吐き出されるわけだが、そのままS3なりGCSにアップロードするとgzip圧縮してないままアセットを配信することになる
gzip
コマンドでとりあえずは圧縮できるが、いい感じに組み込めないか模索する
その上でS3にアップロードする際に content-encoding: gzip
とかどういう感じに設定するのかも書き残しておきたい。
(まだ問題を発見した段階なので、これから試す)
ビルド改善周りで見てた記事
- https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a
- https://www.emgoto.com/react-bundles-and-code-splitting/
- https://webpack.js.org/guides/tree-shaking/
- https://1000ch.net/posts/2012/gzip.html
-
https://circleci.com/developer/orbs/orb/circleci/aws-s3
- これは CircleCI であっぷろーどするときの
- https://syncer.jp/how-to-make-gzip
- https://kjugk.hatenablog.com/entry/2018/09/11/224131
react-app-rewired かましてから compression-webpack-plugin ついかできるようにするかんじかなぁ
S3 にアップする時、html, css, js だけを gzip 効くようにする必要もある
max-age はどのくらいがよいのかなぁ
css, js は contentHash がつくから結構長く設定しててもコードに変更があれば参照されなくなるだろうけど?
エントリポイントのhtmlは index.html のままだから短めで良さそう
aws s3 sync ./build s3://mybucketname/DIRECTORY_NAME/ --exclude "*" --include "*.js"\
--acl public-read --cache-control "max-age=600" --content-type "application/javascript"\
--content-encoding "gzip" --profile PROFILE_NAME
aws s3 sync ./build s3://mybucketname/DIRECTORY_NAME/ --exclude "*" --include "*.css"\
--acl public-read --cache-control "max-age=600" --content-type "text/css"\
--content-encoding "gzip" --profile PROFILE_NAME
aws s3 sync ./build s3://mybucketname/DIRECTORY_NAME/ --exclude "*" --include "*.html"\
--acl public-read --cache-control "max-age=300" --content-type "text/html"\
--content-encoding "gzip" --profile PROFILE_NAME
Firebase Hosting はデプロイの際に Brotli で圧縮してくれるっぽい。さすがGoogle
よく分からんこと
- gzip圧縮すると
*.js.gz
ってファイルが作成されるけど*.js
ファイルは残すのか - GCS, S3 とかで content-encoding: gzip を適用させた上でjsなどを置いた場合、accept-encofing: gzip を見て
*.js.gz
ファイルがあればそっちを返すようになってるのか
この辺ちゃんと理解しないと
参考になりそうだから見てる
解凍トランスコーディングってplaneな状態にしてリクエスト元に返すの?どんな意味があるんだ...
解凍トランス コーディングを使用すると、ファイルの圧縮バージョンを Cloud Storage に保存できます。保存時のストレージ コストを抑えながら、圧縮を行わずにファイル自体をリクエスト元に提供できます。これは、お客様にファイルを提供する場合などに便利です。
Cloud Front が自動でgzip圧縮してくれるの!?
S3にアップロードする際にgzip圧縮をする場合
※ CI上だと変わる箇所はあるが、ローカルから色々試した結果。
js, cssにgzip圧縮をかける
gzip ./build/static/js/*.js ./build/static/css/*.css
圧縮したファイルの拡張子から .gz
を削除する
ls ./build/static/js/*.gz | sed -e s/\.gz// | awk '{print $1 ".gz " $1}' | xargs -n 2 mv
ls ./build/static/css/*.gz | sed -e s/\.gz// | awk '{print $1 ".gz " $1}' | xargs -n 2 mv
S3へアップロード
aws s3 sync ./build/ s3://{BUCKET_NAME} --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude "*.css" --exclude "*.js"
aws s3 sync ./build/ s3://{BUCKET_NAME} --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude "*.css" --include "*.js" --content-encoding "gzip" --content-type "text/javascript"
aws s3 sync ./build/ s3://{BUCKET_NAME} --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude "*.js" --include "*.css" --content-encoding "gzip" --content-type "text/css"
CloudFrontがどんな感じか試してみた👀
Compress Objects Automatically
を有効にしたらS3においてあるjs, css, html等がgzip圧縮されて配信される。
これ必要ない
Google のサービス使うなら Cloud CDN だな。以下のURLが参考になりそう
ちゃんと記事にしてからCloseする。
たぶん流れとしてはgzipやってる?的なところから入ってCloudFront良いねって感じ(雑)