Source Maps

[AndrewSimard]

Been playing around a bit with Lighthouse in the Chrome DevTools, always trying to increase the scoring. Not always a productive use of time, but always learning new things. I've been playing around with source maps and one of the things it suggests, even for production, is to include source maps for large JS files. I can turn on the option to generate the map files in release mode, but for some reason these are getting a little extra junk at the top that is causing it to fail.

)]}'
{"version":3,"file":"ActoriousClient_1_0_3288.js","sources":["../../../../../../../AppData/Local/tmssoftware/registered/TMS WEB Core RSXE12/Core Source/RTL/tms_1_0_3288.js","../../../../../../../AppData/Local/tmssoftware/registered/TMS WEB Core RSXE12/Core

Also, if I enable obfuscation (default in release mode) the map file still generates, but no link to it is added to the .js file. As the map file size didn't change, I'm assuming that this is because the obfuscation 'breaks' whatever was generated with the map file, or that the obfuscation happens after the map file is generated. Might not make sense to have both a map file and obfuscation, but maybe there is. The obfuscation reduces my js from around 1,000 KB to about 800 KB, so it might be nice to have both. Not sure if that is sensible though.

[brunofierens]

Obfuscation happens after JS generation and map generation is based on JS generation.
So, the map file won't much an obfuscated JS file.

[AndrewSimard]

Ah, but there are some obfuscation tools that will also create a new sourcemap, resulting in a smaller JS file and a way to help debug the resulting code as well (which can be made available privately, for example). I will investigate and see if there's something that will work better in this instance.

Not sure what is injecting the extra stuff at the beginning of the sourcemap though.

[brunofierens]

The terser tool is used for obfuscation. GitHub - terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+
I can only suspect this tool must be responsible?

[AndrewSimard]

Is there a way to see how this tool is invoked when the project is built? I was looking at Uglify to do something similar, but apparently terser is the replacement given better support for ES6. In both cases, they seem to support what I was after - passing the original map file generated by TMS WEB Core (with the Delphi references) into, in this case, terser, and have it carry that forward into a new map file that references the obfuscated/minified version.

I haven't checked where the extra line at the beginning of the map file comes from, and whether it is present in the debug build or just in the release build, but will investigate when I get a moment. Seems a solution is here, just not sure if it is possible for me to change the steps involved in how the project build proceeds at this level? Is there a script of some kind, or is this internal to TMS WEB Core?

[brunofierens]

It is invoked from the tmswebcompiler so unfortunately there is little to tweak.
We indeed moved from uglify to terser as I think uglify was abandoned.

[AndrewSimard]

Seems to be. I suppose I can just call this separately as part of a deployment script. Use TMS WEB Core to build the project in debug mode (with optimization turned on and the map file generated) and then call terser separately with the compress/mangle options and the map file to generate the final minified version of the JS file and the map file. All good for now!

[AndrewSimard]

I've checked a bunch of map files, and they all seem to have this at the beginning. It doesn't seem to impact using them in the browser, but it did trip up uglifierjs as this isn't really JSON?

)]}'

Odd.

[brunofierens]

map file before or after terser?

[AndrewSimard]

Before.

[brunofierens]

Strange, but then it must be pas2js that created it. But we've never seen problems with it?

[AndrewSimard]

Seems so. I've never noticed any issue either until I tried to use it somewhere other than Chrome's devtools. Odd, really. Easily removed, but it is in every map file I checked, going back many many months. Is it only me or do you see it in your map files as well?

[brunofierens]

It seems to be part of the spec:

https://sourcemaps.info/spec.html#h.lmz475t4mvbx

[AndrewSimard]

Wow, good find! I had no idea. Kind of an odd way to address the problem, but I guess that solves the mystery.