11

I'm trying configure my webpack.config for webpack-bundle-analyzer. Here how it looks.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

And it shows only index.js, main.js and src folders. How to see all my other dependencies?

enter image description here

Yerlan Yeszhanov
  • 2,149
  • 12
  • 37
  • 67
  • Are you certain there are other dependencies being imported? Can you share some of the code? – skovy Sep 26 '19 at 05:00
  • @skovy I have no idea how to import dependencies, What kind of code would you like? – Yerlan Yeszhanov Sep 26 '19 at 05:02
  • 1
    You asked `How to see all my other dependencies` so I assumed you were importing dependencies? The webpack bundle analyzer only visualizes code that is processed by webpack. If it's never imported (eg `import React from "react"`) it won't show up in the visualization. What's the webpack entrypoint? Is it importing anything or do you only have a single, mostly empty `main.js` and `src/index.js` files? – skovy Sep 26 '19 at 05:05

4 Answers4

21

If you're using Create React App, a simpler method is to go to package.json and edit the npm scripts.

  1. Run npm install --save-dev webpack-bundle-analyzer to install webpack-bundle-analyzer
  2. Add a --stats flag at the end of "build" script command
  3. Add a new script called "analyze" as shown below
"scripts": {
  ...
  "build": "react-scripts build --stats",
  "analyze": "webpack-bundle-analyzer build/bundle-stats.json",
},

Next, run npm run build and then npm run analyze.

AnsonH
  • 2,460
  • 2
  • 15
  • 29
10

First npm install --save-dev webpack-bundle-analyzer Second, add some config in webpack.config.js Here's my config when using create react app in config/webpack.config.js

Import the library in the top

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Add also some validation so your build script doesn't have a problem when you deploy to production

const withReport = process.env.npm_config_withReport

Add this code inside plugins

plugins:[
  withReport ? new BundleAnalyzerPlugin() : '',
]

lastly, add a new script inside package JSON

"report": "npm run build --withReport true"

Go run "npm run report" in your terminal. should be automatically appear the webpack bundle analyzer UI

Hans Sagita
  • 141
  • 1
  • 6
3

This way you can configure webpack-bundle-analyzer WITHOUT EJECTING your React App

  1. Add some dependencies by executing npm install --save-dev progress-bar-webpack-plugin webpack-bundle-analyzer
  2. Create a new folder named scripts at the root of your React App.
  3. Create a new file analyze_build_bundle.js in the scripts folder and add the below code in that file

// script to enable webpack-bundle-analyzer
process.env.NODE_ENV = 'production';
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const webpackConfigProd = require('react-scripts/config/webpack.config')(
  'production'
);

const ProgressBarPlugin = require('progress-bar-webpack-plugin');

webpackConfigProd.plugins.push(new BundleAnalyzerPlugin());
webpackConfigProd.plugins.push(
  new ProgressBarPlugin({
    format: `analyzing... [:bar] [:percent] [:elapsed seconds] - :msg`,
  })
);

// actually running compilation and waiting for plugin to start explorer
webpack(webpackConfigProd, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err);
  }
});
  1. Add the analyze-build-bundle command in your package.json file to run the webpack-bundle-analyzer as below:

"scripts": {
    "analyze-build-bundle": "node scripts/analyze_build_bundle.js",
    "start": "react-scripts start",
    .....
    ...
}
  1. Now execute command npm run analyze-build-bundle. This will build your app and then start the analyzer local server and you should be able to see the screen as shown in below image

enter image description here

Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
0

To run the plugin with an optional parameter, for me, the solution presented on the following topic worked better: webpack config with optional usage of BundleAnalyzerPlugin

I fixed this by making a couple changes to my webpack.config.js.

First I changed the way I declare withReport. Then I changed the way I instantiate BundleAnalyzerPlugin, to instead use concat after the other plugins:

...
const withReport = process.env.npm_config_withReport ? true : false;
...
plugins: [
...
].concat(withReport ? [new BundleAnalyzerPlugin()] : []),
...
Biscuite731
  • 1
  • 2