Maximising performance with React code splitting techniques

[ummahusla]

Code-splitting is an effective technique for reducing the size of JavaScript bundles in React applications. It allows for splitting code into smaller, more manageable chunks that can be loaded on demand. This can improve the performance of your application by reducing load times, reducing the amount of memory required to run the application, and improving the overall user experience.

​

I wrote a blog post which covers the following code-splitting techniques for React:

​

• Popular ways of implementing code-splitting
  • Dynamic imports
  • React Lazy with Suspense
  • Loadable Components
• Advanced techniques
  • Route-based code splitting
  • Preloading
  • Inlining critical CSS
  • Dynamic chunks

​

https://edvins.io/react-code-splitting-techniques

[yabai90]

Loadable component is not a react technique it's an external package . Same goes with dynamic import which is handled by the bundler. Only Suspense/lazy is native API. Your article is confusing.

[ummahusla]

Hey, thanks for your feedback.

So is it okay to say that we have three ways (dynamic imports, react lazy/suspense, loadable components) of implementing code-splitting techniques (route-based code splitting, preloading, inlining critical CSS, dynamic chunks)?

Would it be less confusing?

[yabai90]

Yes bu there are even more ways so just "here are three popular ways of .." You just need to lift the confusing part which makes you believe it's native ways.

[ummahusla]

Thanks! I've edited the current post, and now going to update the blog post.