File bundling, which is the process of following imported files and merging them into a single file was an awesome breakthrough in the development of web applications, and tools like Webpack and Browserify have been very instrumental in making this process easy for developers. Fortunately for React Developers using create-react-app, Next.js, Gatsby or similar tools, there is always a Webpack set-up out of the box to bundle your files. For setting up Webpack manually, you can see the installation guide here.
Sample Codes to Explain Bundling
Bundling your files helps in optimization and reduce the time it takes for your page to load because the browser doesn’t have to run separate files while loading the web app.
If File Bundling Is so Cool Why Code Splitting?
File Bundling helps us keep our file in one place which reduces load time and make our apps faster, but why settle for fast when we can make it faster? Performance is a very important factor in software development and bundling our files increases “Cost of Performance ” especially when the application gets bigger. These can be seen in some cases where we have to install some third-party libraries that end up being bundled even when they are not needed on page load.
Looking at the coverage of a typical React Page above, you will notice that over 68% of “bundle.js” was not needed at the time yet it was loaded and this gets to rub off on the performance of our app as it gets bigger. Issues like this necessitated the concept of code splitting.
Implementing Code-splitting in React
Code splitting which is also supported by our favorite Webpack and Browserify helps us to load those things that are needed by our app on page load first, then load the rest based on the need or use case of the user, which will go a long way in optimization and overall improvement of our app. This process of our app loading only the needed files for initial page load is called “Lazy-loading”.
React has a function call “React.lazy()” that make it possible to render dynamic imports as regular components.
Using React.lazy() for code splitting as shown in the above code snippet is not totally error-proof as we are likely to get an error if the second component is still loading while the first component has been rendered, but not to worry, React got your back with a handy component called “Suspense”.
Suspense is a component that accepts a fallback prop that can be rendered while your component is still loading and this can easily be achieved by wrapping your lazy loaded components with Suspense as shown below.
the code snippet above shows how easy it is to achieve code splitting with React lazy-loading and Suspense which apart from optimization and performance improvement, also gives the user a modern experience by not showing a blank page during page load.
As people’s attention span continues to reduce, it is a big disadvantage to tolerate a page load of more than 3 seconds for first-time users, hence the need to take web performance very serious during development. With React lazy loading and Suspense it is possible to reduce page load time to the barest minimum while keeping the page busy for the users during load-time. It will also be worthy of note that the concept of React lazy loading and Suspense are not yet available server-side rendering as at the time of this publication, but similar aim can be achieved using loadable components.
For Questions, feel free to hola via twitter @w3bh4ck