React Code Splitting

React Code Splitting

React Code Splitting

What does code splitting stand for?


In short, code splitting is just about not loading a whole element, but loading only part of it. When you are reading this page, you don’t have to load the whole site. When you are selecting a single row from a database – you don’t have to take all the data. Obvious? Code splitting is also quite obvious, it is not just about your data, but your code.


Who is making code splitting?


React.lazy?


No – it’s just using it. Code splitting is done on a bundler level – webpack, parcel, or just your file system in the case of “native” esm modules. Code splitting is just files, files you can load somewhere “later”.


Who is using code splitting?


React.lazy is using it. Just using code splitting of your bundler. Just calling import when got rendered. And that’s all.


What’s about React-loadable?


React.lazy superseded it. And provided more features, like Suspense to control loading state. So — use React.Lazy instead.


Share Article:
  • Facebook
  • Instagram
  • LinkedIn
  • Twitter
  • Recent Posts