source-map-explorer

Analyze and debug space usage through source maps

Install:

npm install source-map-explorer

Use:

source-map-explorer bundle.min.js
source-map-explorer bundle.min.js bundle.min.js.map 

This will open up a visualization of how the space is used in your minified bundle:

Here's a demo with a more complex bundle.

Options

• --json: output JSON instead of displaying a visualization:

  source-map-explorer --json foo.min.js{,.map}
  {
    "node_modules/browserify/node_modules/browser-pack/_prelude.js": 463,
    "bar.js": 62,
    "foo.js": 137
  }

Generating source maps

For source-map-explorer to be useful, you need to generate a source map which maps positions in your minified file all the way back to the files from which they came.

If you use browserify, you can generate a JavaScript file with an inline source map using the --debug flag:

browserify -r .:foo --debug -o foo.bundle.js
source-map-explorer foo.bundle.js

If you subsequently minify your JavaScript, you'll need to ensure that the final source map goes all the way back to the original files. For example, using browserify, uglify and exorcist:

browserify -r .:foo --debug -o foo.bundle.js
# foo.bundle.js has an inline source map
cat foo.bundle.js | exorcist foo.bundle.js.map > /dev/null
# foo.bundle.js.map is an external source map for foo.bundle.js
uglifyjs -c -m \
  --in-source-map foo.bundle.js.map \
  --source-map foo.min.js.map \
  -o foo.min.js \
  foo.bundle.js
# foo.min.js has an external source map in foo.min.js.map
source-map-explorer foo.min.js

Types of source maps

There are two types of source maps: inline and external.

If your JS file has an inline source map, then its last line will look something like this:

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJm...

This encodes the sourcemap as a base64 data URL. If your file has an inline source map, the source-map-explorer should have no trouble understanding it.

If your last line instead looks like this:

//# sourceMappingURL=foo.min.js.map

Then the source map lives in an external .map file. The source-map-explorer will try to find this file, but this often fails because it's unclear what the URL is relative to.

If this happens, just pass in the source map explicitly, e.g. (in bash or zsh):

source-map-explorer path/to/foo.min.js{,.map}