Ask Question

How can I inspect the dependency graph with create-react-app?

I currently rewrite my react application to support bundle splitting with React.lazy. I am facing the problem, that some of my Components and other code pieces are being included in the main bundle, even if they should be in one of my splitted bundles because their parent components are being loaded with React.lazy.

Is there a way to somehow inspect the webpack dependency graph of my create-react-app?

Reactwebpack

310 views

AuthorΒ΄s Dominik Sumer image

Dominik Sumer

πŸš€
1
Last edited on

1 Answer available

Best answer

Ok I found that webpack has their analyser hosted on GitHub. With it you can inspect the webpack stats.json which can be generated during the webpack build and can be used for several analyses - for example also to inspect the dependency graph of your build.

Sadly in the newer create-react-app versions, it is no longer possible to generate the stats.json file out of the box. Therefore I made a little hack:

  • install the stats-webpack-plugin npm package
  • go into your node_modules folder and navigate to react-scripts/config
  • edit the webpack.config.prod.js file and add following statement to the plugins configuration:
  • new (require('stats-webpack-plugin'))('stats.json', {chunkModules: true,}),

Now when your execute yarn build to build your create-react-app, you should see a generated stats.json in your build folder. Now you can navigate to the online webpack analyser, upload your stats.json and start inspecting! πŸŽ‰

PS: the output of the webpack analyser can be very overwhelming, especially for bigger applications with many dependencies. Sadly I couldn't find a way to filter them, but if you stay patient, it can help you to find what you are searching for in our dependency tree. Hope it helps.

πŸš€
1