1. Download Coverage Report
Create a coverage report to see which code was downloaded, and which code was actually used for a given entry point of your app.
Download the report and put it in the top level directory of your project. Make sure it's named coverage.json
.
2. Prepare script
Create this file in the top level directory of your project:
build-bundles.js
Copy and paste the below code into it. (Make sure source-map-explorer
is a dev dependency of your project).
Edit the 2 lines underneath //edit these lines
as appropriate.
const { explore } = require('source-map-explorer');
const coverage = require('./coverage.json');
// edit these lines to reflect your project's setup
const jsPath = '/static/js';
const buildFolder = 'build';
const jsPathRegex = new RegExp(`${jsPath}/.*`);
const bundles = coverage
.filter(c => c.url.match(jsPath))
.map(c => `${buildFolder}${c.url.match(jsPathRegex)[0]}`);
console.log(`\nInspecting the following bundles:\n\n${bundles.join('\n')}`);
console.log(`\nloading...`);
explore(bundles, {
output: { format: 'html', gzip: true, filename: `${__dirname}/bundles.html` },
coverage: 'coverage.json',
});
3. Run script
node build_bundles.js
This script will create a bundles.html
file in the current directory. Drag to a browser to view the report.