New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
trevorwhealy opened this Issue Nov 29, 2017 · 9 comments

Comments

Projects
None yet
7 participants
@trevorwhealy

trevorwhealy commented Nov 29, 2017

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")
  1. node build.js

@trevorwhealy trevorwhealy changed the title from Solution: How to use webpack-bundle-analyzer without ejecting. to Solution: webpack-bundle-analyzer without ejecting. Nov 29, 2017

@Timer

This comment has been minimized.

Collaborator

Timer commented Dec 8, 2017

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 closed this Dec 8, 2017

@trevorwhealy

This comment has been minimized.

trevorwhealy commented Dec 8, 2017

@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

This comment has been minimized.

Collaborator

Timer commented Dec 8, 2017

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

This comment has been minimized.

murugaratham commented Mar 14, 2018

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

This comment has been minimized.

murugaratham commented Mar 14, 2018

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

@byzyk

This comment has been minimized.

byzyk commented Jun 3, 2018

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

@bugzpodder

This comment has been minimized.

Collaborator

bugzpodder commented Jun 3, 2018

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

@cag2050

This comment has been minimized.

cag2050 commented Jun 17, 2018

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

This comment has been minimized.

marcantoinepelletier commented Sep 13, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment