Optimizing React SPA applications in benchmark tools vol II.
Technology
3
 min read
November 11, 2021

Optimizing React SPA applications in benchmark tools vol II.

Ján Cvenček
Ján Cvenček
Frontend Develooper

I bring you the second part of tips on how to optimize your SPA (single page apps) based on React framework. To help improve performance, and so improve scores in benchmarking tools. In this episode we will look at dynamic imports, removing unused code, refactoring or Nginx Pagespeed

The tips below have been applied to a React application created with the CRA (Create React App), which uses webpack v4. CRA is preconfigured with several techniques for better application performance and speed. To modify the webpack configuration in CRA without executing the eject command,
it is necessary to use libraries like craco or customize-cra. The production build of the application is served using the Nginx web server.

As with the first part, where I mainly covered file compression, web fonts
and CSS, I used following tools to measure performance and speed scores:

The tools themselves in the outputs suggest solutions to eliminate individual problems.

The following procedures are not the only ones, and several of them have alternative ways to resolve reported problems from the tools.

Dynamic imports

Dynamic import of modules allows the corresponding * .chunk.js file
to be downloaded by the browser only when it is needed. The result is:

  • smaller size of the resulting bundle
  • more .js files called "chunks" - a module covering comprehensive functionality
  • faster page loading - downloaded only what is needed

Webpack v4 supports dynamic imports using SplitChunksPlugin. CRA also supports code splitting. Imports can be named / change loading strategy / prioritize load etc. via parameters written as comments.

React.lazy

Allows lazy loading of components to be rendered on a given route. It is possible to modify them with parameters through the mentioned comments.

Example of import

Removal of unused code, reduction of bundle size

To find an unused code / assets, it is possible to use e.g. deadfile tool.

The following are available for analyzing the size of individual JS bundles:

According to the output, try to shrink large bundles e.g. reactjs, lodash, momentjs, chartjs… If there is a suitable alternative (preact, lodash-es, just,…) with a smaller size → replace it. The method of import can also help,
where instead of importing the whole module, only the required functionality
is imported, e.g.

import {join} from 'lodash' → import join from 'lodash/join'

⚠The priority is to keep the functionality ahead of the smaller bundle size!⚠

Lazy load of the elements

There are several libraries that help with lazy loading elements like <img>, <picture>, iframe, video, audio, etc. They also help with allocating space
in the layout for non-rendered elements, with responsiveness, dragging content into scroll containers as needed, etc. Their implementation is at the developer's discretion regarding the performance benefits for the application. If you need
to implement the following functionalities, it is possible to use:

Refactoring

For a better result in audit tools, it is often necessary to refactor the application / part of it itself. The problem areas in the application are most easily found
by a programmer who knows the application in depth. The following links can help you refactor and find problem areas in the application:

Nginx Pagespeed

PageSpeed is an open-source server module for Nginx and Apache servers from Google that helps optimize the web. The module implements many performance recommendations from Google PageSpeed Insights.

Improves website latency by changing the resources on this page to match best practices in terms of site performance.

  • Image optimalization - compression, translation into WebP (for supported browsers), image resizing
  • Minimizes HTML
  • Minimizes and merges CSS, JavaScript
  • Optimizes file caching
  • Combines external JavaScript and optimize it
  • Optimizes file loading

Configuration example

/etc/nginx/pagespeed.conf

The configuration was set to Docker image hitko / nginx-pagespeed with brotli compression

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.