react-app-rewiredで作られたプロジェクトでwebpack-bundle-analyzerを使用したかったので調査

環境

  • react: 17.0.1

  • webpack: 4.44.2

  • react-app-rewired: 2.1.8

方法

byzyk/react-app-rewire-webpack-bundle-analyzer を使用する

  1. インストール

    • yarn add --dev react-app-rewire-webpack-bundle-analyzer

  2. config-overrides.jsに以下のように記述

    const rewireWebpackBundleAnalyzer = require('react-app-rewire-webpack-bundle-analyzer')

module.exports = function override(config, env) {
  // ...

  if (env === 'production') {
    config = rewireWebpackBundleAnalyzer(config, env, {
      analyzerMode: 'static',
      reportFilename: 'report.html'
    })
  }

  return config
}

  3. yarn build でビルド終了後、ブラウザが立ち上がり結果が表示される

参考