Skip to content

Instantly share code, notes, and snippets.

@aholachek
Last active January 29, 2020 15:43
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aholachek/b627ec060290114d239ad33f3d8ec1b2 to your computer and use it in GitHub Desktop.
Save aholachek/b627ec060290114d239ad33f3d8ec1b2 to your computer and use it in GitHub Desktop.
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