created: 2024-07-31T07:34:15.718Z
webpack-bundle-analyzer を使い、結果を GCS にアップロードする
node_modules 配下から import したライブラリがどれくらいのサイズになっているかが見られる。
出力のビューが html ファイルになっているので、 --upload フラグをつけている。
#!/usr/bin/env bash
set -eux
readonly dirname="/tmp/webpack-bundle-analyzer/$(date +'%F')"
mkdir -p "$dirname"
npx webpack \
--config webpack.config.js \
--mode production \
--progress \
--profile --json > "$dirname/stats.json"
readonly filename="$(date +'%H%M').html"
npx webpack-bundle-analyzer "$dirname/stats.json" ./dist/ \
--mode=static \
--no-open \
--report="$dirname/$filename"
if [ "${1:-}" = "--upload" ]; then
readonly bucketname="myapp-bucket"
gsutil cp "$dirname/${filename}" "gs://$bucketname${dirname}/${filename}"
open "https://storage.cloud.google.com/$bucketname${dirname}/${filename}"
else
open "$dirname/$filename"
fi
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const isProduction = argv.mode === "production";
module.exports = (_, argv) => {
plugins: [isProduction ? undefined : new BundleAnalyzerPlugin()],
}
PR ごとに生成されて、html へのリンクがついてきたりするとカッコいいかもしれない。
その他
webpack-bundle-analyzer の第二引数に出力ファイルのパスを渡すことができる。
第二引数を渡さなくても問題なく生成されるのだけれども「ファイルが見つかりません」というエラーが出てしまうのでつけている。
Error parsing bundle asset "/builds/xxxxxx/vendors.cb3f9722098fcd2c8907.js": no such file
ワークアラウンド
A possible workaround to make it work, in case you have an output directory named dist:
