![]() ![]() In practice, this means that esbuild mangles local variable names and argument names. After all, having a bundler break your code really stinks. That means we can keep writing our veryLongAndDescriptiveNamesThatWouldMakeEvenObjectiveCProgrammersBlush and let our build tools shorten them for us!Įven though esbuild implements mangling, by default it only mangles names when it is confident that mangling won't change the behavior of the code. And indeed, smart tools like esbuild already implement identifier mangling. That calculus changes if we can get nice optimizations like this essentially for free, say by having our build tool do them for us automatically. Shaving off a few bytes here and there is nice but hardly qualifies as spectacular. ![]() If a potential optimization makes your source code less readable or maintainable, or requires significant manual work, it's almost never worth it unless it delivers truly spectacular improvements. ![]() Now before you rush out to rename all of your variables to single letters, I want to stress that optimizations like this need to be approached cautiously. I know that optimization probably seems more than a little silly if you're coming from a compiled language, but here in the wonderful world of JavaScript we gladly take wins like this wherever we can find them! Since JavaScript is shipped as source text, reducing the length of identifier names actually decreases the program's size. To the much shorter: const x = 123 console. And it turns out esbuild actually does shorten identifiers in some cases through a process called "mangling" (a term JavaScript tools likely borrowed from an only roughly similar process for compiled languages).ĭuring minification, mangling shortens long identifier names, transforming code such as: const someLongVariableName = 123 console. I assumed esbuild would have already shortened these identifiers. While debugging our minified source code on v last year though, I noticed something surprising: our minified JavaScript still included tons of long identifier names, such as extensionIgnoredRecommendationsService. This means that we've had to watch the size of our JavaScript slowly tick upwards. Many potential savings are also not worth the risks they introduce, or the extra engineering effort required to implement and maintain them. Finding further savings has become increasingly challenging over the years. We've already done many easy code size optimizations, including running our code through esbuild to minify it. Again this work largely happens because we keep track of our code size and really hate seeing it increase. That 4x size increase is also after a lot of ongoing performance engineering work. Now when you consider that eight years ago VS Code lacked features many would consider essential today-such as editor tabs or the built-in terminal-that increase is not perhaps as awful as it sounds, but it's not nothing either. For instance, one of VS Code's core JavaScript files ( workbench.js) is now around four times the size it was eight years ago. Although we put a lot of thought into what features we build into VS Code, over the years adding new functionality has necessarily grown the amount of code we ship. Unfortunately, these changes have almost always been increases. Actively monitoring code size keeps members of the VS Code team aware when it changes. Code size has become even more of a focus with VS Code shipping on web () in addition to the desktop application. This passion includes keeping the size of VS Code's JavaScript small. The VS Code team is passionate about performance, be that optimizing hot code paths, reducing UI re-layouts, or speeding up startup time. Name mangling is a neat trick, but may not be worth it in many codebases, and our specific approach to mangling can likely be improved on (or may not be necessary at all depending on how your project is built). I want to treat this more as a case study in how we approach engineering problems on the VS Code team rather than focusing on the specifics of mangling. In this post, I want to share how we identified this optimization opportunity, explored approaches to the problem, and eventually shipped this 20% size reduction. Instead all it took was a new build step: name mangling. Not too shabby considering we got this reduction without deleting any code and without any major refactorings in our codebase. Sure that's less than some of the individual gifs from our release notes, but that's still nothing to sniff at! Not only does this reduction mean less code you need to download and store on disk, it also improves startup time because less source code has to be scanned before the JavaScript is run. ![]() That works out to a little over 3.9 MB saved. Jby Matt Bierner, recently reduced the size of Visual Studio Code's shipped JavaScript by 20%. Node.js Development with Visual Studio Code and Azure.Moving from Local to Remote Development. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |