Solution: webpack-bundle-analyzer without ejecting.

[trevorwhealy]

Ejecting is a real shame for any instance of create-react-app, so I found a way to use webpack-bundle-analyzer without ejecting. Hopefully this will save someone out there from having to eject to make this addition.

1. Create a file in root, I call mine "build.js"
2. Add this javascript.

process.env.NODE_ENV = "production"
var BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin

const webpackConfigProd = require("react-scripts/config/webpack.config.prod")

webpackConfigProd.plugins.push(
  new BundleAnalyzerPlugin({
    analyzerMode: "static",
    reportFilename: "report.html",
  })
)

require("react-scripts/scripts/build")

3. node build.js

[Timer]

We generally recommend source-map-explorer which doesn't require ejecting or a monkey-patch. 😄

https://www.npmjs.com/package/source-map-explorer

I'll close this, people can still find this through search if they're interested.

[trevorwhealy]

@Timer yea the issue doesn't need to be open 👍 In general, source-map-explorer is far less engaging and visually appealing, and I find it more enjoyable to spend time analyzing the bundle with webpack-bundle-analyzer. I know CRA is all about hands-off, but adding a js file with 10 lines of code seemed minimal enough to me.

[Timer]

I understand! We just try to not flood users with too many options, since you seem like a power user, your solution is fine. 😄

Just be aware it may break in the future, but you should be alright for a while.

[murugaratham]

wanted to do this, but some how i'm getting `Error: Cannot find module 'webpack-bundle-analyzer'
i've installed it and even verified it's in node_modules.

[murugaratham]

oh, silly me.. i installed webpack-bundle-size-analyzer instead

[byzyk]

In case anyone is using react-app-rewire: I've created react-app-rewire-webpack-bundle-analyzer plugin for that.

[bugzpodder]

I think we are going to add this to CRA2 #3945

[cag2050]

Add webpack-bundle-analyzer with ejecting, modify code in file: config/webpack.config.prod.js.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
　　plugins: [
　　　　...
　　　　new BundleAnalyzerPlugin()
　　]
}

demo: https://github.com/cag2050/antd_mobx_demo/blob/master/config/webpack.config.prod.js

[marcantoinepelletier]

Worth mentioning if you are using create-react-app with the Typescript settings, you need to change react-scripts to react-scripts-ts in your require.

const webpackConfigProd = require('react-scripts-ts/config/webpack.config.prod')
and
require('react-scripts-ts/scripts/build')

[kartikag01]

@trevorwhealy
From react-scripts version 2.1.2
there is no more webpack.config.prod so the given answer is breaking.
i have figured out we have to import webpack.config in this way
const webpackConfigProd = require("react-scripts/config/webpack.config")('production');
but still report.html is not generated.

[freund17]

For everyone coming here from google and using a recent version of react-scripts:
#3945 landed, so now you can use

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build --stats && webpack-bundle-analyzer build/bundle-stats.json -m static -r build/bundle-stats.html -O",
    "test": "react-scripts test"
  }
}

to include bundle-stats.json and bundle-stats.html in your build-directory.
(The latter is what you came here for.)