CODEWITHSUNDEEP
javascriptreactjsoptimizationcode-splitting
Stephen Phillips
Stephen Phillips

Reputation: 681

When to code split (React- Suspense and Lazy)

What bundle size in KB should I consider splitting at? At what point does weight become too heavy that I should split it out. My whole bundle without splitting is around 800KB so it loads relatively fast. I am just trying to figure out if it should be around 10KB/ 100KB, etc... Moment.js takes around 50KB, so I am trying to figure out if I should split out all modules that contain moment for example.

If I don't code split does that mean overall it provides a better user experience once they load the initial page since every other page would load faster? I get this would lead to a bad first experience of loading the page, but am just trying to figure out the tradeoffs.

Haven't found any good resources with this information. I am using create react app.

Upvotes: 0

Views: 765

Answers (1)

Hugo
Hugo

Reputation: 1084

800kb is not super big but still, the smaller your bundle is, the better.

I think the main problem having only one bundle is that, if you change one single character in your app, all your clients will need to download everything again.

Let's take an example:

  • You see a typo in your code. You already have thousands of users who downloaded the 800kb bundle with this typo.
  • You push a fix (only one character change).
  • All your users need to download the whole bundle again (yes, they need to download Moment.js again). Be it 1*800kb or 8*100kb, they will still need to download 800kb of data. (related question)

What you want to do, is to split your chunks in a way that allows users to only download the files that changed. For the other files, they can be cached, so no need to download them again. So in the example above, you don't want your users to download Moment.js again because... it didn't change at all.

I suggest you to read this very nice article about how to split your bundle: https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

You can also add one level of split by creating "per page" chunks. Here is how to do it with React: https://reactjs.org/docs/code-splitting.html If you make changes on Page A, your users won't have to download the chunks for Page B again.

Upvotes: 3

Related Questions