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?
2699 views
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:
stats-webpack-plugin npm packagenode_modules folder and navigate to react-scripts/confignew (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.