DEV Community

Cover image for Why our websites are slow — Importance of bundle size

Why our websites are slow — Importance of bundle size

shrey vijayvargiya on September 17, 2022

Not Reactjs, not a framework or the servers, or API , nor the internet is the reason behind it. Under the Hood The story begins way bac...
Collapse
 
macdonst profile image
Simon MacDonald

I agree 100% with this comment by Robin and their follow-up comments. At the risk of being combative, I think your initial premise is a bit flawed.

Not Reactjs, not a framework or the servers, or API, nor the internet is the reason behind it.

You have correctly identified that large bundle sizes are the cause of slow applications but not the root cause of why bundle sizes are so large in modern web applications. The reason behind large bundles is the frameworks we've turned to improve developer experience have worsened user experience.

Over the past 5 years, while we were all busy working with JS frameworks, the platform got really, really good. The best way to reduce bundle sizes is not to immediately reach for a framework but instead progressively enhance our applications with JS when needed.

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

Yes, the packages have evolved a lot, webpack mostly handle all the required things such as code-splitting, removing dead-code, lazy loading and so on.

Well, my initial premise have no intention to blame frameworks and langugaes behind the lagging of websites. In fact, I've mentioned them to give combat the blames react often get nowadays about being a bit slow on browser.

Thread Thread
 
macdonst profile image
Simon MacDonald

When I said:

Over the past 5 years, while we were all busy working with JS frameworks, the platform got really, really good.

I meant the web browser itself has vastly improved. To me, the best way to keep your bundle size small is not to immediately reach for a framework but instead start with HTML and CSS, only adding in JS when you absolutely need to. If you want an example, I wrote a post that starts as a React app for collecting data via a from and we strip away what isn't needed until we are left with HTML and CSS only.

blog.begin.com/posts/2022-02-09-do...

Collapse
 
jackmcbride98 profile image
Jack McBride

Doesn't nextjs do code splitting by default? and it lazy loads other pages when their components come into the viewport. This I believe is the benefit of MPA, you can split code up and not have to load a huge bundle all at once.

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

Yes, nextjs does prefetching but bundling is taken care by webpack out of the box. Sorry but nextjs is SPA and Astro is MPA the main difference is multiple entry points in MPA then in SPA.
As I have mentioned, MPA has benefits but we still can't develop high end products and state management projects like Figma using MPA or Astro. Javascript helps us to write complex applications easily.

Collapse
 
jackmcbride98 profile image
Jack McBride

nextjs.org/learn/foundations/how-n...

Eech page has its own bundle. I see what you mean about not being able to make high end state management projects with MPA or Astro.

Next is the best of both worlds. You can build a SPA which appears to the user to be MPA or you can build an MPA. Whatever the project you are building requires. One of the reasons I'm big on Next :)

Collapse
 
edugonch profile image
Eduardo

Reduce Javascript usage to the minimun, try ROR Hotwite approach, basecamp Hey is build using it.
Not all meeds to be Javascript.

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

Will certainly look into it. Still reading a lot to make things practical.

Collapse
 
hugomcm profile image
hugomcm

The solution to a faster web is less JavaScript without a doubt.
In that line of thought Qwik way of doing it will be the future of web sites/apps development.
dev.to/builderio/qwik-the-answer-t...

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

Yes, Qwik can be a game changer, Qwik follows resumability concept under the hood to make it fast.
I am reading a lot nowadays about Qwik and having conversation with the author of Qwik to understand it much better.
Game change JS framework, Qwik?

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

Sorry, I didn't understand it quite well. But if suggesting a way then Yes bundling is a most proper and optimised way in 2022 because it's compressed and served fast over internet. In addition, bundle itself can support lazy loading and other features to optimise it.

 
shreyvijayvargiya profile image
shrey vijayvargiya

Yes, agree, considering your points in the discussion. We have a addon to the approach of how websites can be optimised.
I believe and reading how to go for a best approach for optimising the websites covering each and every aspects of web development.

Collapse
 
naucode profile image
Al - Naucode

Great article, keep the good work! Liked and followed! 🚀

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

Thanks for reading and I will try my best every time.

Collapse
 
gamerseo profile image
Gamerseo

Great post. Everything is perfectly explained

Collapse
 
behrjozef profile image
Jozef Behr

Really site speed matters for search engine and for user experience also . Thank mates for sharing this over here. ~ Jozef behr

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

Astro with their (react, vue, svelte, tailwind) integrations is worth looking at.🤔

Collapse
 
shubhdeep12 profile image
Shubhdeep Chhabra

This is worth reading.
Keep going🚀🚀

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

Thanks for reading, will try me best.

Collapse
 
ebonydomingue13 profile image
Ebony Dominguez

Great article! Very useful information. Thank you

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

Thanks for reading

Collapse
 
batizofht profile image
Batizofht

Hhhhhh

Collapse
 
crystaltucker profile image
CrystalTucker

How to optimize my website to make it load faster? voodoo to break up a relationship

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

ihatereading.in/t/DfNJmSQKL7mKgT4t...

Here we go with 15 ways to improve your website performance.