bundle size調べてみた

当サイトで使用しているgatsbyのversionをv4へ上げたついでに、サイトのbundle sizeなども調べてみました。

bundle anlyzeはwebpack-bundle-analyzerが有名ですが、各フロントエンドのwebpackを直接いじることはあまりしないので、各フレームワークに応じたbundle analyze用のプラグインを使用するのが一般的な方法みたいです。

各Reactのフレームワークに応じたbundle analyze方法を紹介した後、当サイトの結果も例として紹介したいと思います。

bundle analyze方法

以下、方法をまとめます（いずれも簡単です）。

create-react-app

create-react-appでwebpack-bundle-analyzerを使用したい場合は、cra-bundle-analyzerを使うのが良さそうです。

cra-bundle-analyzerはcreate-react-app用にwebpack-bundle-analyzerを調整した解析ライブラリで、インストール後、npxコマンドで実行してあげるとbundle analyze結果がbrowserで自動的に表示されます。

$ yarn add -D cra-bundle-analyzer
$ npx cra-bundle-analyzer

Next.js

Next.jsにはwebpack-bundle-analyzerをNext.js用に拡張した@next/bundle-analyzerという公式プラグインがあるのでそれを使います。

$ yarn add -D @next/bundle-analyzer

インストール後、next.config.jsを以下のように編集します。

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({});

その後はyarn buildの前にANALYZE=trueをつけるとbuild後にanalyze結果を表示してくれるようになります。

$ ANALYZE=true yarn build

Gatsby.js

Gatsby.jsにも専用のプラグインがあるのでそれをinstallします。

 $ yarn add -D gatsby-plugin-webpack-bundle-analyser-v2

install後、gatsby-config.jsにpluginを追記します。

module.exports = {
  plugins: [
      'gatsby-plugin-webpack-bundle-analyser-v2'
  ]
}

あとはgatsby buildすると自動的にbrowserが開き、bundle analyzerの結果が表示されます。

当サイトの結果

以下、当サイト（Gatsby.js）の結果です。

lighthouseでのperformance結果は悪くないのである程度予想はできてましたが、そこまで大きいsizeのものはなさそうでした（gzipedサイズでtotal 210.67KB）。

強いて目立つものを挙げるとReact, polyfill.js, recoilなどでしょうか。

Reactは対応できないので放置として、recoilなどはすぐに対応できそうです（気が向いたらやるかも）。

polyfill.jsは...小さくできるんでしょうか？ Gatsbyに組み込まれているものなので難しいかもしれません🥲

こんな感じで簡単にbundleの解析ができるので、たまにチェックしてみると面白いかもしれません。