Skip to content

Instantly share code, notes, and snippets.

@aholachek
Last active Jan 29, 2020
Embed
What would you like to do?
Source-map-explorer workflow: View all bundles loaded in a certain entrypoint

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment