False dichotomy, with what is likely extreme hyperbole on the JS side. Are there actual sites that ship 20 MB, or even 5 MB or more, of frameworks? One can fit a lot of useful functionality in 100 KB or less of JS< especially minified and gzipped.
- Google Mail: Inbox is ~18MB (~6MB Compressed). Of that, 2.5MB is CSS (!) and the rest is mostly JS
- Google Calendar: 30% lower, but more or less the same proportions
- Confluence: Home is ~32MB (~5MB Comp.). There's easily 20MB of Javascript and at least 5MB of JSON.
- Jira: Home is ~35MB (~7MB compressed). I see more than 25MB of Javascript
- Google Cloud Console: 30MB (~7MB Comp.). I see at least 16MB of JS
- AWS Console: 18MB (~4MB Comp.). I think it's at least 12MB of JS
- New Relic: 14MB (~3MB Comp.). 11MB of JS.
This is funny because even being way more data heavy than the rest, its weight is way lower.
- Wiz: 23MB (~6MB Comp.) 10MB of JS and 10MB of CSS
- Slack: 60MB (~13MB Compressed). Of that, 48MB of JS. No joke.Javascript should even generally be fairly efficient in terms of bytes/capability. Run a basic minimizer on it and compress it and you should be looking at something approaching optimal for what is being done. For instance, a variable reference can amortize down to less than one byte, unlike compiled code where it ends up 8 bytes (64 bits) at the drop of a hat. Imagine how much assembler "a.b=c.d(e)" can compile into to, in what is likely represented in less compressed space than a single 64-bit integer in a compiled language.
Yet it still seems like we need 3 megabytes of minified, compressed Javascript on the modern web just to clear our throats. It's kind of bizarre, really.
Then of course every library is allowed to pin its own dependencies. So you can have 15 different versions of the same thing, so they can change API at will.
I poked around some electron applications.
I've found .h files from openssl, executables for other operating systems, megabytes of large image files that were for some example webpage, in the documentation of one project. They literally have no idea what's in there at all.
You talk about minification. The JS isn't minified much. Variable names are single letter, but property names and more aren't renamed, formatting isn't removed. I guess the minifier can't touch property names because it doesn't know what might get turned into JSON or not.
There's plenty of logging and span tracing strings as well. Lots of code like this:
_n.meta = {
name: "createThunk",
key: "createThunkaddEphemeralMessageSideEffectHandler",
description: "addEphemeralMessageSideEffect side effect handler"
};
Everything appears compiled using a coroutines framework, which adds some bloat. Not sure why they aren't using native async/await but maybe it's related to not being specialized based on execution environment.
Shooting from the hip, the learnings I'd take from this are:
1. There's a ton of low hanging fruit. A language toolchain that was more static and had more insight into what was being done where could minify much more aggressively.
2. Frameworks that could compile and optimize with way more server-side constants would strip away a lot of stuff.
3. Encoding logs/span labels as message numbers+interpolated strings would help a lot. Of course the code has to be debuggable but hopefully, not on every single user's computer.
4. Demand loading of features could surely be more aggressive.
But Slack is very popular and successful without all that, so they're probably right not to over-focus on this stuff. Especially for corporate users on corporate networks does anyone really care? Their competition is Teams after all.
- https://web.whatsapp.com 11.12MB compressed / 26.17MB real.
- https://www.arstechnica.com 8.82MB compressed / 16.92MB real.
- httsp://www.reddit.com 2.33MB compressed / 5.22 MB real.
- https://www.trello.com (logged in) 2.50MB compressed / 10.40MB real.
- https://www.notion.so (logged out) 5.20MB compressed / 11.65MB real.
- https://www.notion.so (logged in) 19.21MB compressed / 34.97MB real.