Cheng's Blog

TL;DR

For development, use cheap-module-eval-source-map. For production, use cheap-module-source-map.

Disclaimer: The following result is based on a small project. The result may vary depending on the size of your project.

Webpack currently provides seven options to produce a source map. It is nice that it gives so many choices to developers, but it also downright horrible for beginners.

As a beginner, I find the offical document impossible to understand. So I decided to test it out myself. I am testing all of the options on a project with the following attributes:

1. 18 .js files (modules if you prefer) along with libraries they referenced are bundled into a bundle.js file
2. The bundle.js file is minified to 680 KB
3. I left a bug in the code on purpose so that I can see what's the differences between the source map options. The bug is on line #37 in a file named CreateLogForm.js
4. I wrote my code in ES6 and JSX and used babel to transpile it back to ES5
5. I tested the error in Chrome's debug tools:
   1. I verfied the line number and the file name where the error orginated
   2. I clicked on the linked error file and see if the original source is displayed

source-map

I am going to start out with this one because this option produces exactly what you would expect, a source map. After the bundling process, I got a bundle.js.map file:

• Size: 5.44 MB
• Bundle Time: 50949 ms (This is how long it took to pack the bundle. There are fonts, images and css being emitted by webpack, so this is not how long it took to produce the source map file. This is the result of running this operation once. Thus, it should not be interpreted as the average running time of the operation.)
• Bug Display:
  • File name displayed correctly
  • Line number displayed correctly (the line number matches the original source file's line number)
  • The file referenced by the error: ./~/react-dnd/~/invariant/browser.js which is completely wrong

cheap-source-map

A SourceMap without column-mappings. SourceMaps from loaders are not used.

No idea what that means, but this time:

• Size: 698 B
• Bundle Time: 46098 ms
• Bug Display:
  • File name displayed correctly
  • Line number displayed incorrectly (the line number matches the transpiled file's line number instead of the original)
  • The file referenced by the error: ./~/react-dnd/~/lodash/lang/isFunction.js which is completely wrong

cheap-module-source-map

A SourceMap without column-mappings. SourceMaps from loaders are simplified to a single mapping per line.

No idea what it is talking about:

• Size: 308 B
• Bundle time: 56611 ms
• Bug Display:
  • File name displayed correctly
  • Line number displayed correctly
  • The file referenced by the error: ./~/react-dnd/~/dnd-core/lib/index.js which is completely wrong

Note: This is the best option for production because:

1. Both bundle.js and bundle.js.map are smallest
2. The correct file name and line number are provided

eval

Each module is executed with eval and //@ sourceURL

No .map file emitted and the bundle.js file size is increased to 2.34 MB:

• Size: N/A
• Bundle Time: 33879 ms
• Bug Display:
  • File name displayed correctly
  • Line number displayed incorrectly (the line number matches the transpiled file's line number instead of the original)
  • The file referenced by the error: The transpiled code of the original source is displayed

eval-source-map

Each module is executed with eval and a SourceMap is added as DataUrl to the eval

No .map file emitted and the bundle.js file size is increased to 5.83 MB:

• Size: N/A
• Bundle Time: 34257 ms
• Bug Display:
  • File name displayed correctly
  • Line number displayed correctly (CreateLogForm.js?b337:37 I don't know what does the b337 portion stands for though)
  • The file referenced by the error: The original source code is displayed

cheap-eval-source-map

No .map file emitted and the bundle.js file size is increased to 5.8 MB:

• Size: N/A
• Bundle Time: 40663 ms
• Bug Display:
  • File name displayed correctly
  • Line number displayed incorrectly (the line number matches the transpiled file's line number instead of the original)
  • The file referenced by the error: The transpiled code of the original source is displayed

cheap-module-eval-source-map

No .map file emitted and the bundle.js file size is increased to 5.74 MB:

• Size: N/A
• Bundle Time: 40663 ms
• Bug Display:
  • File name displayed correctly
  • Line number displayed correctly (CreateLogForm.js?b337:37 I don't know what does the b337 portion stands for though)
  • The file referenced by the error: The original source code is displayed

Note: This is the best option for development because it is the smallest option that shows the correct line number.