Bundle Analyzer
Bundle Analyzer visualizes size of output files with an interactive treemap. This helps you understand what’s taking the most space in the bundles.
superplate serves optional plugin which adds Source map explorer to the created project.
Run the command below:
npm run buildnpm run analyzeThis should open 2 pages in the browser. One for client bundles, and one for the server bundles.
Adding Bundler Analyzer to your project later#
tip
All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose Bundle Analyzer plugin during the project creation phase.
If you didn't choose the Bundle Analyzer plugin during project creation phase, you can follow the instructions below to add it.
- npm
- yarn
npm install --save source-map-exploreryarn add source-map-explorerThen in package.json, add the following line to scripts:
"scripts": {+ "analyze": "source-map-explorer 'build/static/js/*.js'", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test",Then in package.json, add the following line to scripts:
npm run buildnpm run analyze