3 Reasons to React.Lazy on your React Website
If you are asking yourself the question: Why should I use React.Lazy to split my code into chunks? Then you come to the right place. In this article we will give you 5 good reasons why you should use React.Lazy in your React web application. At the bottom of this article you will find a link to a tutorial on how to get started.
1. It is easy to get started with React.lazy!
If you are using React, Typescript and Webpack it is really easy to get started code splitting using React.Lazy. All it takes is to change your import line, add a suspense and declare how you want your chunks to be named in Webpack. So time shouldn’t be a factor not to choose code splitting your react web application.
(At the very bottom of this article you will find a link to our tutorial on how to get started with code splitting).
2. Your website becomes more accessible with React.lazy
One big problem with our internet speeds getting faster and our CPU getting faster too, is that we tend to build more demanding websites. When we say more demanding we mean it requires more CPU power and the size of each web page is getting bigger.
In many places around the world the internet is still maximum a 3G connection and if they have to download 5–10mb or page then it would take forever for them to surge the internet. By splitting your code with React.Lazy you only download the files that are required, so instead of loading the whole web application you would load the page and the elements needed. This way your web application would become much more accessible in areas with slower internet speeds.
3. Faster initial loading speeds
Speed is a huge part of a website! Statistics say that if it takes more than 3 seconds to load and display a web application we get impatient and choose to go elsewhere. By splitting your code with React.Lazy you lower the amount of data that needs to be downloaded and processed and that will result in faster initial loading speeds.
If you are interested in getting started, please visit our free and easy tutorial showing you how to use React.Lazy with Webpack and Typescript: https://sustainablewww.org/principles/60e95b1e4e28270023c9545c.
If you liked this article, please share it to your friends, colleagues and family. We want to spread our sustainable web development methods and you can help us doing it by sharing our articles. Only together can we change the internet and become more sustainable.
