Hacker News new | ask | show | jobs
by tracker1 3667 days ago
For reference, it's not necessarily react or redux, or whatever else is in use... I've managed to get preact+redux in a 20k (gz) bundle for a standalone, usable component, flushing out an app may triple that size, but if you're judicious with your components, it's not too hard.

Then again, Immutable.js is about 15kb on it's own, and a few other heavy hitters and you'll hit 100kb (gz) load before much functionality. That said, I think a 500kb target for a web app isn't too bad, this does exceed that, but not sure if certain bits (image references, fonts, etc) are part of the actual JS bundle, which will bloat it out a lot.
1 comments
k__ 3666 days ago
lol, it IS react and the fact that you achieved 20k isn't thanks to react, but thanks to preact...
link
tracker1 3666 days ago
React has a lot more sanity checks in place, but that comes at a cost. For a component, it's too much of a price to pay... for a full-blown application, it's usually well worth it. For a component, 20kb is pushing it... for an application, generally 500k would be the limit in my mind. Which is pretty easily hit regardless of the framework, but too many applications include various libraries willy nilly....

Often times you will wind up with competing libraries that both get installed... You'll get all of lodash, and all of Ramda... you'll get all of jQuery, and a few other tools because you're bringing in one component. Working on larger applications with people less judicious as to what they bring in results in a lot of bloat... more so when it's easier to bring something in (thanks to webpack/babel), and while I appreciate that, it's a tool that's easy to abuse.

In the end, you can get react+redux in under 100kb, you can get a lot of the app boilerplate for a mid-sized app well under 200kb... I would compare this to angular, or ng2 that tend to be much bigger. In the end it's how you are building.

Beyond this, as I said, I didn't really look into the bundle... depending on configuration it could be including images, fonts and css. Which would mean it's really not that bad, though it should probably be using url-loader for a lot of the assets to break into separate downloads. Also, react-icons is much better when only needing a few icons from the libraries, they're also well normalized to mix/match in terms of size/position than the fonts tend to be.

link