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

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