It looks like you’re packaging the world. Would you like help?
Visual Studio Code, the editor of life, the metaverse, and everything. With an expressive web frontend and rich API, thousands of extensions have been built on top of it. But while they make it, they also break it in places we don’t pay much attention to 👀.
Recently I took a look at ~/.vscode where the extensions are stored on disk, and had some interesting observations. As VSCode extensions are powered by Node.js, you may expect to hear another Guy Fieri story. This post is not as satirical, instead it resonates with a common theme in web development: unnecessary bloat.
GitHub Actions provides auto-complete for workflow configs, plus a handy panel to interact with Actions inside VSCode. The extension weights less than 3 MB, but adding source maps and huge GIFs we are over 30 MB:
$ du -sh ~/.vscode/extensions/cschleiden.vscode-github-actions-*/* | sort -h | tail -n4
148K /Users/kid/.vscode/extensions/cschleiden.vscode-github-actions-0.24.2/resources
7.9M /Users/kid/.vscode/extensions/cschleiden.vscode-github-actions-0.24.2/dist
22M /Users/kid/.vscode/extensions/cschleiden.vscode-github-actions-0.24.2/media
30M total
$ du -sh ~/.vscode/extensions/cschleiden.vscode-github-actions-*/dist/* | sort -h
1.0M /Users/kid/.vscode/extensions/cschleiden.vscode-github-actions-0.24.2/dist/extension-node.js
1.0M /Users/kid/.vscode/extensions/cschleiden.vscode-github-actions-0.24.2/dist/extension-web.js
2.9M /Users/kid/.vscode/extensions/cschleiden.vscode-github-actions-0.24.2/dist/extension-node.js.map
3.0M /Users/kid/.vscode/extensions/cschleiden.vscode-github-actions-0.24.2/dist/extension-web.js.map
7.9M total
Putting media files inside your repository can be convenient, but only if they are reasonably small. If they become too large, consider moving them to a different branch or external storage 🚚. Then you are less likely to make mistakes like these.
Inline HTML provides syntax highlight and IntelliSense for special JavaScript template strings. Since language servers are involved we expect to witness dependencies dominating the extension size. Instead, we have this mysterious croc file taking up half the space:
$ du -sh ~/.vscode/extensions/pushqrdx.inline-html-*/* | sort -h | tail -n4
540K /Users/kid/.vscode/extensions/pushqrdx.inline-html-0.3.5/docs
3.8M /Users/kid/.vscode/extensions/pushqrdx.inline-html-0.3.5/node_modules
5.4M /Users/kid/.vscode/extensions/pushqrdx.inline-html-0.3.5/croc
9.8M total
Upon inspecting, it seems to be an executable of croc, a file-transferring tool:
$ file ~/.vscode/extensions/pushqrdx.inline-html-*/croc
/Users/kid/.vscode/extensions/pushqrdx.inline-html-0.3.5/croc: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), statically linked, Go BuildID=6ad6eCjoCpDzAgT4fa1q/zgtYT6Jqz8Hudut1Z9pr/XktDKbBkBi9_EQ6gPETk/GnREkn9n1QHz_srmnqP8, stripped
What if the extension uses it to do IPC with language servers 🤔? We never know. There’s one issue with this approach though, in order to be portable across all platforms supported by VSCode, it probably should be built with Cosmopolitan instead of compiled as Linux ELF.
WakaTime tracks programming activity. The heavy lifting is done by the external WakaTime CLI, so the extension itself must be super lightweight right?
Behold, an entire build of VSCode Web resides here 🤯:
$ du -sh ~/.vscode/extensions/wakatime.vscode-wakatime-*/{,.}* | sort -h | tail -n3
796K /Users/kid/.vscode/extensions/wakatime.vscode-wakatime-19.0.1/dist
53M /Users/kid/.vscode/extensions/wakatime.vscode-wakatime-19.0.0/.vscode-test-web
54M total
There’s no trace of it in the source repository, it must have slipped everyone’s eye in order to make it into the package. Not necessarily a bad thing, as we can rest assured that a backup is at hand in case our VSCode installation breaks. Or, that’s the last thing you would expect an extension to do 😅.