webpack-bundle-analyzer を使い、結果を GCS にアップロードする

node_modules 配下から import したライブラリがどれくらいのサイズになっているかが見られる。

• webpack-bundle-analyzer - npm

出力のビューが 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

• webpack-contrib/webpack-bundle-analyzer · Discussion #593

ワークアラウンド

A possible workaround to make it work, in case you have an output directory named dist:

• Error parsing bundle asset "*" no such file when mixing relative paths · Issue #214 · webpack-contrib/webpack-bundle-analyzer