Solution: webpack-bundle-analyzer without ejecting.

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.

Create a file in root, I call mine "build.js"
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")

node build.js

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.

@Timer

@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.

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.

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.

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

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

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

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

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')

@trevorwhealy

@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.

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.)

Navigation Menu

Repository navigation

Solution: webpack-bundle-analyzer without ejecting. #3518

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Solution: webpack-bundle-analyzer without ejecting. #3518

Description

Activity

Timer commented on Dec 8, 2017

trevorwhealy commented on Dec 8, 2017

Timer commented on Dec 8, 2017

murugaratham commented on Mar 14, 2018

murugaratham commented on Mar 14, 2018

byzyk commented on Jun 3, 2018

bugzpodder commented on Jun 3, 2018

cag2050 commented on Jun 17, 2018

marcantoinepelletier commented on Sep 13, 2018

kartikag01 commented on Jan 9, 2019

freund17 commented on Jan 14, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions