christywww-blog

[christywww-blog]

Source Map

First, what is the source map

Source Map it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location.

For example, jQuery file is compressed only 3 lines, each line has almost 30,000 characters, and all internal variables’ name is already changed. You check the error message, but you don’t know the original location.This is the main problem that Source map wants to solve.

Second, how to use the source map

Add a comment to the JavaScript code:

The browser (the latest versions of Chrome, Firefox, and Edge support) loads file.js.map and automatically calculates the actual location of the code.

In the Chrome development panel (press F12 to open) settings (press F1 to open), you can check whether the source map needs to be loaded by checking the "Enable Source Maps" option. If you don't like the idea of the comment you can alternatively set a special header on your compiled JavaScript file:

The source map itself does not affect the execution of the code and will only be used when locating the wrong location.Like the comment this will tell your source map consumer where to look for the source map associated with a JavaScript file. This header also gets around the issue of referencing source maps in languages that don't support single-line comments.

Third, how to generate source map

You'll need to use the Closure compiler to minify, concat and generate a source map for your JavaScript files. The command is as follows:

Fourth, the source map format

The source map is essentially a JSON format, such as:

1. Version number that the source map is based off 2. The file name of the generated code 3. SourceRoot allows us to prepend the sources with a folder structure 4. Sources contains all the file names that were combined 5. Names contains all variable/method names that appear throughout your code. 6. Lastly the mappings property ,The real space saving is done here.

Base64 VLQ and keeping the source map small

Originally the source map spec had a very verbose output of all the mappings and resulted in the sourcemap being about 10 times the size of the generated code. Version two reduced that by around 50% and version three reduced it again by another 50%, so for a 133kB file you end up with a ~300kB source map. So how did they reduce the size while still maintaining the complex mappings?

VLQ (Variable Length Quantity) is used along with encoding the value into a Base64 value. The mappings property is a super big string. Within this string are semicolons (;) that represent a line number within the generated file. Within each line there are commas (,) that represent each segment within that line. Each of these segments is either 1, 4 or 5 in variable length fields. Some may appear longer but these contain continuation bits. Each segment builds upon the previous, which helps reduce the file size as each bit is relative to its previous segments.

Maps code

In order to save storage space, mappings will be encoded into a string.

Step 1: Calculate the relative value

Replace each digit in the map with the difference between the current map and the corresponding location of the previous map, such as:

Mappings: [    [      [ 1, 0, 2, 5, 1 ],      [ 2 , 0, 3 , 6, 0 ]    ],    [      [ 5 , 0, 2 , 3, 0 ]    ] ]

Where the first mapping point does not change, and then every number on each mapping point subtracts the number of the corresponding mapping point (allowing cross-line) corresponding to the position (if the number of mapping points is less than 5, the omitted part is processed by 0) , Finally get:

Mappings: [    [      [ 1, 0, 2, 5, 1 ], // unchanged      [ 1, 0, 1, 1, -1 ] // 1 = 2 - 1, 0 = 0 - 0, 1 = 3 - 2, 1 = 6 - 5, 1 =    ],    [      [ 3, 0, -1, 0 ]   // 3 = 5 - 2 , 0 = 0 - 0, -1 = 2 - 3 , -3 = 3 - 6, 0 = 0 - 0    ] ]

Step 2: Combine the numbers

Write all the numbers that appear in the mappings, lines separated by different comma points, separated by commas, and different lines are used; (semicolons) are separated.

1 0 2 5 1, 1 0 1 1 1; 3, 0, -1, -3, 0

Step 3: Encode the number For each number, use VLQ encoding to  convert it to letters, the specific conversion method is: 1. If the number is negative, take the opposite number. 2. convert the number to the equivalent binary. And at the end of the sign bit, if the number is negative, then fill 1 or fill 0. 3. From the right to the left to split the binary, one to take 5, the lack of complement 0. 4. will be divided into good binary order. 5. Each binary front complement 1, the last paragraph of the binary complement 0. So that each binary is 6 bits, the value range is 0 to 64 (with 0, excluding 64). 6. According to the Base64 encoding table to each binary into letters:

To 170, for example, 1) turn to binary: 10101010 2) 170 is a positive number, the right fill 0: 101010100 3) from right to left split binary: 10100, 1010. 4) Less than 5 bits 0: 01010, 10100 5) Descending order: 10100, 01010 6) In addition to the last one in front of 0, the other in front of each fill 1: 110100, 001010 7) turn to decimal: 52, 10. 8) look-up table to get: 0K

Step 4: Combine the results

Passing each number in the second step and then splicing the VLQ is the final result.

CAEKC, CACCC; GADHA

Reference Link:

Demo: Get original location https://www.thecssninja.com/demo/source_mapping/

Introduction to JavaScript Source Maps—Ryan Seddon https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

JavaScript Source Map—Yifeng Ruan http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

Source Maps 101 https://code.tutsplus.com/tutorials/source-maps-101--net-29173