Enhancing React Web Applications
Performance is the first thing that a developer always chases after. Language after language we created with many technological advances to optimize its predecessor. Yet with each one we strive to push the limits to make the performance optimized.
One such latest example is the web applications that are being built with the React in these recent times. React is an advanced framework for web applications that boasts of a DOM which is very quick. It makes numerous segments and renders the DOM tree. Still there are a few different ways through which engineers can take care of the performance related issues in React based web applications. Using this article, a portion of such issues are attempted and the possible solutions are listed.
Although React uses multiple optimization techniques for bundling and deploying, there are still a few things that any rookie of React must know to help the React’s scripts in executing those improvements and enhance the performance of the app.
Assets and Images:
All our websites and applications use more and more assets for making sophisticated representational screens that enhance the user interaction. Always a developer must keep in mind that these assets like the SVG’s, PNG’s etc. which we use will become part of your bundle along with the js and css files, and will be downloaded at the client side while rendering your pages. So smaller the assets are, faster the print of DOM will be. It’s advisable to use the CDN if possible, to reduce the static assets in the bundle and fetch everything runtime online.
Unused and Reused Components:
Every React developer is familiar with the word Component. It’s a straight fact that as minimal and optimal the components are, better the performance is always. But a developer should be attentive to the design on what can be reused and what are unused in the current implementation. The keen and detailed awareness on building the components is a must for a better understanding of the React. It’s recommended that any components that is not being rendered or unused must not be a part of the bundle.
Packages and Problems:
Packages and libraries are a part of the React. Multiple components and several functionalities are inherited from these packages. So one should be aware of the risks and usability issues of these packages. Most of these packages will have internal dependencies with other packages that will be installed along with the parent ones. Always calculate and measure and then use the packages during the implementation. Avoid any dependencies on these packages and try writing them as your own utility functions wherever possible in JavaScript, so it will add up in improvising the page performance.
Use explicit imports while importing from any package if possible. For example, if you are using ` get` from lodash then import it as follows
/* Regular Import */import _ from 'lodash'; // size of import 71.2k (gzipped 24.7k)/* Explicit Import */import get from 'lodash/get'; // size of import 8.2k (gzipped: 2.5k)
Like the case of components, the unused packages should not be a part of our app bundle. Verifying and removal of unused packages from the package.json must be handled for optimized bundle sizes. In order to find such unused npm packages one of the easiest ways is to use the depcheck package. Here is how it can be implemented.
One crucial thing that a React developer should always keep in mind is, how efficient the components are being constructed and used. Because
The component build efficiency is directly proportional to the application performance everywhere.
Not only the construction but also how they are being imported and used will also play a role in an effective performance.
Chunks and Imports (Route based Chunking):
While developing web applications using React, the major load and effectiveness of the page can be optimized based on how we create chunks of each component and how we import and use them effectively.
For example, consider a react application with multiple routes and pages.
There will be some scenarios where a user might not use a few routes at all or might not need them initially. In any of the cases, the initial load must happen only for the specific route which the user will be accessing. So the scripts, chunks, data, assets and a whole lot of code which is needed for that particular page should be loaded first for a quick initial response and interaction. This can be implemented using react `Lazy-Suspense` for each route based component import.
This will separate and create chunks based on each and every route, and only the chunk of the path which is currently being accessed is loaded instead of loading all other component’s chunks and assets.
More and More Chunks (Component based Chunking):
Here we see that creating chunks and importing them at appropriate times helps in enhancing the page performance, but what if we chunk all the big pieces in similar fashion ? Yes, one should know how react bundling is splitting the code into chunks based on how you are importing the components and making as many small chunks as possible will definitely improve the overall performance.
For example, consider the react-pdf package which is a heavy npm package. In the following example, a simple container imports a reports viewing component and renders it on click of a button.
With this implementation, the bundle size while running on the browser will contain only one big chunk of node modules which will be downloaded irrespective of viewing the reports component or not.
Let us implement the same container using react’s `Lazy-Suspense`
With this implementation, the bundle size while running on browser will contain two separate chunks of node modules of parent container and reports component react-pdf. Here, the reports chunk will be downloaded only on viewing the reports component. If the user does not click on the view reports button the required bundle is not imported at all. Thus making the initial render much faster by fetching only what is needed initially.
These are very few of many optimizations that can be done on a react application. Hope these will help to some extent.
References:
