esbuild icon indicating copy to clipboard operation
esbuild copied to clipboard

Esbuild should have JavaScript's builtin property built into the mangle property module.

Open masx200 opened this issue 3 years ago • 4 comments

Esbuild should have JavaScript's builtin property built into the mangle property module.

Just like terser, when executing mangle property, you are allowed to reserve the JavaScript built-in properties.

https://github.com/terser/terser/blob/13fe8ca67a3bee4bdec317aeab28728589c36505/lib/propmangle.js#L72

https://github.com/terser/terser/blob/13fe8ca67a3bee4bdec317aeab28728589c36505/tools/domprops.js#L2

masx200 avatar Aug 29 '22 15:08 masx200

https://esbuild.github.io/api/#reserve-props

Option reserveProps using regular expressions is too slow to filter thousands of attributes and reserveProps should be a hashset .

masx200 avatar Aug 29 '22 15:08 masx200

You can see from the built-in files in terser that dom retains more than 7000 propertys, and if these propertys are not built-in, transferring such a huge amount of data every time the conversion code is done slows down.

masx200 avatar Aug 29 '22 15:08 masx200

https://terser.org/docs/api-reference#mangle-properties-options

masx200 avatar Aug 29 '22 15:08 masx200

You are having trouble because you are trying to use this feature in a way that is not recommended. If you read esbuild's documentation, you'll realize that the way you are supposed to use this feature is to pick a naming pattern that cleanly separates the properties that you want to mangle from the properties that your JavaScript runtime uses. My rationale for recommending this approach is as follows:

  • This is an extremely simple and effective way of automatically avoiding all name collisions. You shouldn't ever even encounter the situation that you are worried about.

  • It also makes it possible to tell which properties are mangled when reading the code, which seems pretty important given that they behave differently than normal properties.

  • It also guarantees that mangling will happen, while using names that look like built-in JavaScript APIs doesn't. For example, if built-in API names are reserved like Terser and you make an internal-only API that uses get and set methods then your API will not be mangled, while they would be mangled fine if you had used get_ and set_ instead. This would lead to sub-optimal output (or sub-obfuscated output, depending on your reasons for using the feature).

You can still do what Terser is doing with esbuild if you want to. Just run the code in Terser that you linked to above, and write all of those reserved properties to a JSON file (mapped to false) and pass that to esbuild using --mangle-cache= (documentation is here: https://esbuild.github.io/api/#mangle-cache). This tells esbuild to avoid mangling any of those properties. I recommend against doing this but you are still welcome to do it if you prefer.

evanw avatar Aug 29 '22 19:08 evanw

I'm closing this issue since I'm not planning on doing this (for the reasons described above).

evanw avatar Dec 01 '22 14:12 evanw