GatsbyJsでWebpackバンドルサイズを確認する

GatsbyJsでWebpackバンドルサイズを確認する

当たり前だがAdSenseを入れるとサイト遅くなった。
原因を探るため我々はGatsbyJsを良い感じにしてくれているWebPackの奥地に向かった。と言えば簡単なのだが
WebPackは魔境だ。僕みたいな素人が触っても火傷するだけ。ということでパッケージを探した。

gatsby-plugin-webpack-bundle-analyzerを使う

gatsby-plugin-webpack-bundle-analyzerというプラグインが便利そうだ。
+ gatsby-plugin-webpack-bundle-analyzerのインストール
+ gatsby-config.jsの設定
+ 確認

gatsby-plugin-webpack-bundle-analyzerのインストール

npm install --save gatsby-plugin-webpack-bundle-analyzer

gatsby-config.jsの設定

gatsby-config.jsの設定を追加してやる

plugins: [
    'gatsby-plugin-webpack-bundle-analyzer',
]

確認

gatsby develop

で自動的にブラウザに表示される。
ただ、毎回起動されるのはウザいので使わないときはコメントアウト推奨。