To investigate bundle contents, we suggest using the @scandipwa/bundle-analyzer. To set it up, the following actions are required:

1. Install the bundle analyzer extension

To install a bundle analyzer, use one of the following commands:

 # Using Yarn
npm install @scandipwa/bundle-analyzer # Using NPM

Once the package is added to the project, enable it as an extension in the package.json file (in the scandipwa section). Like so:

`"scandipwa": {
      "extensions": {
          "@scandipwa/bundle-analyzer": true
      }
  }

2. Compile the application

To use bundle analyzer, switch into development mode (meaning start a development build), like so:

yarn start # Using Yarn
npm start # Using NPM

Upon completion, the http://localhost:5000 should open in browser (visit this page manually if it did not open).

<aside> 🧠 To review production bundle size, modification of bundle analyzer extension implementation is required. Update the node_modules/@scandipwa/bundle-analyzer/build-config/analyzer.js with following contents:

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

module.exports = {
  plugin: {
    overrideCracoConfig: async ({
      cracoConfig,
    }) => {
      cracoConfig.webpack.plugins.push(new BundleAnalyzerPlugin(
        process.env.NODE_ENV === 'production'
          ? {
            analyzerMode: 'static',
            reportFilename: 'report.html',
            defaultSizes: 'gzip'
          }
          : {
						defaultSizes: 'gzip'
					}
        )
      );

      return cracoConfig;
    },
  },
};

</aside>

3. Inspect the bundle contents

Take a look at a bundle-analyzer output, it presents every chunk of the application, along with its modules.

<aside> 🧠 To see module and chunk sizes as they would appear in browser, select Gzipped as default bundle analyzer size display mode (atop the left sidebar).

</aside>

In general, the bundle analyzer is useful to inspect the content of chunks. Each chunk and modules is represented as a titled rectangle blob, clicking on it, will bring it in focus. Hovering on modules allows previewing their path and size.

How to inspect contents of critical chunks?

To inspect contents of critical chunks (chunks included in a critical request chain):

1. Open sidebar on the left