Source-map-explorer workflow: View all bundles loaded in a certain entrypoint

instructions.md

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.