Generating source maps for PureScript bundles

Posted on June 5, 2019 by Elliot Davies

If you’re building a frontend app with PureScript, you might want to analyse the resulting JavaScript bundle to see which Purescript modules generated the most code. The tooling doesn’t really advertise it, but it is possible to generate source maps for this purpose.

With the PureScript compiler directly

The compiler has a --source-maps flag that can be used in conjunction with the bundle command.

Your workflow might look like this:

In this example the bundle and its source map will be output as bundle.js and bundle.js.map.

The --output option is required in order for --source-maps to work.

With Webpack and purs-loader

Pass the bundle and pscBundleArgs options in your Webpack configuration:

By default, the bundle.js and bundle.js.map will be placed in the output directory.

With Pulp

Note that the --to option is required for --source-maps to work.

Analysing the source maps

The source-map-explorer tool will give you a nice treemap visualisation.