2019-02-04に投稿

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

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

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第23回 GatsbyJSにGoogle AdSenseを導入する
第24回 GatsbyJSでStaticにファイルを置く
第25回 GatsbyJsでWebpackバンドルサイズを確認する
第26回 GatsbyJsでFontを変更するTypeface編
第27回 GatsbyJSでStyled Componentsを使う

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント