We reduced the size of our JavaScript bundles by 33%

https://dropbox.tech/frontend/how-we-reduced-the-size-of-our-javascript-bundles-by-33-percent

by soheilpro • 3 years ago

50 59 3 years ago

Cthulhu_• 3 years ago

TL;DR, they had a better look at their dependencies, applied code splitting, and used Rollup. They updated their build from the initial 2014 version, at long last.

no_wizard4• 3 years ago

Something webpack doesn't get right to this day: building consumable libraries.

It has all the bones, and it would be great if it did, as its extremely powerful at manipulating the AST as part of the process etc so you could do some neat optimizations, but it won't output to a standard format, even with experimental ESM output feature enabled, that makes the library reasonably consumable.

Rollup / Vite really excel here but I love competition pushing things forward, meaning webpack having a better library building experience would be a good thing.

TheRealPomax2• 3 years ago

esbuild any day. JS tooling doesn't need to be written in JS, and when it's not, it's properly blazing fast.

c_s_guy• 3 years ago

I was actually looking into building a library today with Webpack and ran into similar problems. But could you help me understand what you meant here?

but it won't output to a standard format, even with experimental ESM output feature enabled,

Are you saying ESM is not a standard format? Or that the ESM output doesn't actually follow standard ESM? Or maybe you meant something else entirely?

tracker13• 3 years ago

Yeah.. I think the two things I'd look for first on older codebases would be removing and JS shims and looking for larger libraries like moment and similar that can be removed. Expressly lazy loading any graph/chart libraries helps a lot too.

I'd probably reach for vite or parcel for a bundler, but using Rollup directly is okay.

k__• 3 years ago

"When was the last time you were about to click a button on a website, only to have the page shift—causing you to click the wrong button instead?"

On mobile Twitter/X it happens every time I reload the page.

bonestamp2• 3 years ago

Ya, basically every site where they load inline advertisements of an unknown height (or maybe they intentionally leave the height out of the CSS so you accidentally click on the ad).

tracker13• 3 years ago

I have to think it's often intentional... It's the most annoying thing tapping/clicking and then the ad url comes up instead of what you were expecting.

bensecure• 3 years ago

They added a neat feature recently where they have a popup asking you something stupid, with a button you have to click to hide it. Then, exactly as the page seems loaded enough for you to attempt tapping the button, a new popup appears from google asking if you want to share your google account with twitter, with the "agree" button in the exact position of the previous button. It didn't work on me, but seems like a pretty cool doxx nonetheless.

jes5199• 3 years ago

one time I worked at a company that shipped an app with a version of this bug that caused people to charge money to the wrong individual, because sometimes the buttons would shuffle right before the click

behnamoh• 3 years ago

I know some people still use Dropbox, but tbh it never clicked for me. It went from being a simple cloud solution to a bloated crapware. To my surprise, MS OneDrive performs better than DB, but it's kinda slow at times. Google Drive otoh, is fast but I'd never put all my data there. iCloud is "ecosystem-ware"—you can access it from Android and Windows, for sure, but the UI treats you like a child (maybe it was made for kids). On top of that, Apple is anal in terms of authentication. I don't want to own an iDevice just to login to my cloud. I wonder if there are genuinely decent cloud platforms out there...

nprateem• 3 years ago

I just use rsync

wmichelin• 3 years ago

this is overly simplistic. rsync to where? please tell us more :p

DanHulton• 3 years ago

At some point, I'm going to really buckle down and try out Seafile (https://www.seafile.com/en/home/). It looks like it's just the good parts of Dropbox, and I can run it on my own hardware/systems.

jwells89• 3 years ago

I would assume most of Dropbox's appeal lies in its cross-platform nature, but for me that's turned out to not add much actual value. I find that I don't really need everything to be everywhere and accessible at all times… no point in most of the things on my daily driver Mac to be accessible from from my gaming desktop or ultrabook used mostly for studying.

On the odd occasion I need something to be mobile-accessible, iCloud does the trick (and if I were to switch to Android, Google Drive would fill that niche). Once a blue moon when I need to get files to other machines on my local network, Syncthing and Snapdrop do the trick.

egberts12• 3 years ago

I reduced my JavaScript 100% and experienced no loss of business.

SketchySeaBeast• 3 years ago

How is the static-text "serving my own blog" business doing these days?

lightbendover2• 3 years ago

Without ads, probably pretty badly.

IggleSniggle4• 3 years ago

There are bunches of ways to do dynamic sites that don't use any js, and even more that use just a tiny bit of js. For examples of the first, "update on submit" and "long-polling HTML" (you can use CSS to make this like an SPA) come immediately to mind. The first has the advantage of demanding a conversational UI (the UI never changes except when the user expects), and the second has, well, ok, not much, but it gives you a WebSockets-like flow while being compatible with mid-90s tech.

JohnFen3• 3 years ago

The less JS a site uses, the more likely I am to use the site regularly.

not_your_vase• 3 years ago

I just have to laugh. This website is 6.36MB big, out of which 4.51 MB is Javascript.

Congrats, I guess.

lionkor2• 3 years ago

Of course, it has to display text, images (gasp!), and needs working links (oh!!). Thats at least 150 npm packages already.

Joeri• 3 years ago

If only, create react app is closer to 1500 packages. To be fair, the react team is moving away from CRA. However, they’re pushing people to next.js, which is even bigger.

yyyk• 3 years ago

Yes, there's still a useless 1.85MB. One day we'll find out how to economically shove it all in Javascript/WebASM, and than the website will be perfect.

tracker13• 3 years ago

Yeah, wasm gives me some home... though, I don't think the likes of Blazor is the answer. I can say that Rust+yew is interesting to say the least and there are even better performing options. The yew todomvc[1] example is around 100k total.

I would really like to see a complete component library (something similar to mui.com) for Yew. There are a couple Material Design libraries, but last I checked they are all very incomplete and rough around the edges. Doesn't have to be material, necessarily, just consider mui the nicest, most feature complete UI component library I've ever seen for the web.

Aside: anyone know how to exclude extension resources in devtools network tab?

https://yew-todomvc.netlify.app/

bern4444• 3 years ago

It amuses me that there is so much criticism of the modern web - but a modern app is massively larger.

The dropbox app is 237.7 MB - that's so much more insane to me.

Of course that app size does include all the assets - images, icons, fonts, etc which the JS bundle for the site doesn't include. But its still insanely large to me.

I don't mean this as a criticism of the app size - just that web/android/ios all are platforms which require a large amount of code and assets to be uniform and available everywhere - web, desktop, phone, tablet, etc.

psychoslave• 3 years ago

The dropbox app is 237.7 MB - that's so much more insane to me.

I vividly remember "printer drivers" whose installer would take a whole CD.

sitzkrieg• 3 years ago

completely agree, i dont have many apps on phone but the average size is over 200mb and they want to update constantly w hehe funny patch notes which is rude considering the bandwidth you expect users to burn updating. i find it completely amazing no one bats an eye on these ( not to mention the mobile data usage )

JohnFen3• 3 years ago

It amuses me that there is so much criticism of the modern web - but a modern app is massively larger.

Both of these problems are ridiculous. But the web one is arguably more severe, since you only download an app once.

uranusjr• 3 years ago

With modern caching don’t you also only download the web app once as well? I feel the reason web is worse is more because the download happens right before you want to use it, not ahead of time like app bundles.

We reduced the size of our JavaScript bundles by 33%

Related Stories