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 import of modules allows the corresponding * .chunk.js file
to be downloaded by the browser only when it is needed. The result is:
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.
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
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!⚠
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:
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:
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.
Configuration example
/etc/nginx/pagespeed.conf
ℹThe configuration was set to Docker image hitko / nginx-pagespeed with brotli compression
