DEV Community

Cover image for How I used React-Loadable to more than halve my React app's load time

How I used React-Loadable to more than halve my React app's load time

Max Rozen on February 26, 2020

React-Loadable provides you with a component you can use to load a React component later, rather than immediately as you load the React app. ...
Collapse
 
thekashey profile image
Anton Korzunov • Edited

It's 2020! Using react-loadable, the project completely unmaintained for the past 2 years is a very bad decision.
Code splitting is awesome, I totally agree, but there are better ways to use it and better libraries.

I repeat - stop using react-loadable.

If you don't need SSR - use React.lazy, that's all. If you need SSR or looking for more complex solutions - well, there are options.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
thekashey profile image
Anton Korzunov

James, many people did put their effort. Have tried to fix componentWillMount, tried to fix many other things, ended moving to other projects or forking loadable, cos there were no answers from you, the single maintainer.
Having "other priorities in their life" is not an excuse. If you cannot, or don't want to maintain something - you don't have to. However, please make it clear to the ones who are going to use your creation, and don't stop others from not recomending it due to this condition. Especially if they don't have to use it all.

There is a polite way of interaction with your own library users - open the issues, and add "looking for a maintainer" badge. That would be enough to do anything else you value more.

And thank you for merging some important PRs a few days ago.

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
thekashey profile image
Anton Korzunov

You are very kind and focused on yourself only, as you always have been.
In terms of code splitting I did a lot and contributed enough to the other projects code base, theory and practice. Just not in React-Loadable.
Why? Well, every conversation with you ended like that, and I have other priorities in my life.
And if you are allowing you to have them, then allow anyone else to have the same or the different priorities in their life. Please be a bit more self-reflective.

You know, Has anyone told you how stupid you look up on that high horse?.

Thread Thread
 
scriptedalchemy profile image
Zack Jackson

I know react universal started as a PR to your project back in the day. It defiantly helped us bootstrap the whole chunk-flushing concept to get SSR and code-splitting to play nice. I believe faceyspacey did some collaboration with you a long time ago & for whatever reason. Ended up its own product, following a wave of other projects pulling the SSR feature back into their projects. All of them today are pretty much still based off the flush-chunks/report mechanism.

I know OSS is tedious and projects come and go, new options pop up and so on. React Loadable still works, but I'm sure someone would have taken over maintainership on your behalf. React loadable gets a ton of active downloads and while it still works - somebody should have stepped up to keep it going for the userbase. Especially with the documentation and everything else. Passionate newbie to OSS could have taken over merging pull requests. If nobody came forward then that's kind of crummy on the OSS community. Checking the repo - it's nice to see all the pull requests merged in, but there were like 300 issues or something which has now been disabled.

I can understand your passion. However, Anton does not represent the worst of open-source by any stretch. His contributions have actually made a difference. Solid code, easy to speak to and get support, nice, long term maintenance, works well with others.

Abandoning users isn't a great move either - I always think twice about installing any of your software because its tough to say you're reliable enough - Yeah its not your problem and if im going to depend on code i should be prepared to maintain it. I'm glad it works still but perhaps "request for maintainers" banner could have helped keep it going... I hand off my old projects, but always care for the users.

For someone who has built a career around OSS - you can come across as a bit of a risk.
Users don't really follow the maintainer. Know what's going on in our lives. Reputation ends up being the thing that follows around. While your software is really good, and you're very talented, interactions with the community have been erratic.

I really don't want to get into some pissing contest. Jamie, it's nice to see you active on GitHub again - reach out to the community when you're tired of a project. You could be the gateway for a bright young engineer to get involved in OSS - might even love it as much as you and you'd have been able to get a maintainer, they'd maybe get a new career direction.

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
scriptedalchemy profile image
Zack Jackson

I’ve been there as well, more often than not that’s how it can turn out. I’m sorry nobody else stepped up. I really do understand.

It’s good to see you on github. You’ve dedicated a lot to OSS. I’m pretty blunt and direct, but when I hammer the point in - i try to not escalate, if that makes sense? When reading past threads here’s the feeling: β€œyeah you’re totally right, but how you communicated it made me less inclined to agree. Even though I knew you were completely correct” - maybe I’m out of touch but I feel I haven’t seen you pop up much in a while. If you’re getting back in or just doing some cleanup, you’ve done great work and I just want to see your points of view and ideas be more well received. Maybe I’m off base entirely

Collapse
 
rozenmd profile image
Max Rozen • Edited

Just looking to learn here: why is it a very bad decision?

(I wasn't aware of @loadable/component when I posted this, but I've since switched my project over and have found no measurable improvement over react-loadable)

Collapse
 
thekashey profile image
Anton Korzunov

Very bad - because it is competely unmaintained. No real answer was given to any issue, no PR has been merged.

Bad - loadable provides only a simples splitting pattern, if you don’t need SSR it’s better just to use React.lazy, it would work just the same.

Other libraries provide a better SSR support, and, for example, able to split not only components.

Collapse
 
moustachedsign profile image
Moustache Design

Please change this to use @loadable/components as using an unsupported project is bad practice and leads to security issues.

There are other reasons why loadable is better and you can read those in the react official docs

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
moustachedsign profile image
Moustache Design

Oh so if that package is transferred to a malicious person and you upgrade a patch or minor version, what happens then?

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
moustachedsign profile image
Moustache Design

That's good, but sometimes other projects will be transferred to someone that says they will contribute to it and they will plant malicious code in, similar to what happened with event-stream

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
moustachedsign profile image
Moustache Design

I'm not dismissing it, React official docs is. I appreciate the hard work that went into it, but as I said some of the pull requests haven't been merged in over 6 months and it seems to have generally less support.

I personally used it in my projects but as we need to ensure we keep only third party libraries that are strictly supported and maintained I can't use or recommend this one anymore and I feel the blog creator should at least provide a few options to the users that might not have the full picture.

Also, don't be rude. I don't know you and your victimism is uncalled for.

Collapse
 
owenmelbz profile image
Owen Melbourne

This is very handy for people! The concept of code splitting and lazy loaded components is πŸ‘ŒπŸ‘ŒπŸ‘Œ

However react supports lazy loading out of the box and doesn’t need a third party packages to do this, so my advice would be to stick to the official documented route if possible.

reactjs.org/docs/code-splitting.html

Collapse
 
thekashey profile image
Anton Korzunov

However Lazy covers only component level splitting.
"Other libraries" have already implemented library-level splitting in form of renderProps or resource level splitting in form of hooks, which let you reduce you bundle size even more.

Collapse
 
_kushagra profile image
Kushagra 🎈

Is lazy loading a component on the page better than having it just be in the initial bundle? For example by using next/dynamic when you have a huge component on the home page is it better to let it be bundled or does making it dynamic have any benefits,does it defer its loading? Could never understand this πŸ˜