This is the second installment of the series. As a result, if you haven't yet completed Part 01 of the series, it is highly urged that you do so first.

According to the official website, Asgardeo is an IDaaS that allows developers to create seamless login experiences in minutes.

Let's concentrate on the performance optimization approaches utilized in react and webpack in this article.

Things accomplished with Webpack configurations. 

1. Using production over development mode

Webpack provides built-in optimization while utilizing production mode. It includes things like tree-shaking, etc. The environment variable 'env.NODE ENV' can also be used to set the environment to 'production'.

When the bundle is inspected using the bundle-analyzer plugin in production mode, it is evident that the bundle size is dramatically reduced compared to the development mode.

Additionally, when the production mode is active, we compress using the Brotli plugin with a Gzip fallback.

2. Bundle splitting using SplitChunks plugin

With the bundled javascript, webpack creates a single bundle.js file. The SplitChunks plugin divides the bundle into several sections.

// webpack.config.js

module.exports = {

 //...

 optimization: {

splitChunks: {

// include all types of chunks

chunks: 'all',

},

 },

};

"Providing all can be very powerful, because it means that chunks can be shared even between async and non-async chunks," according to the webpack documentation.

Even while this step does not lower the bundle size, it now allows common chunks to be cached across pages.

3. Minify i18n internationalization JSON files

To minify JSON files, we utilize the json-minimizer-webpack-plugin in conjunction with a JSON loader. It cut the file size and loading time in half for these files.

4. Server-side caching

Only static assets are cached using server-side caching. A noteworthy feature of the SplitChunks plugin is that it names each file name with a hash based on the content in each chunk. It aids in the maintenance of a server-side caching mechanism by generating a new hash for each chunk file name with each build and deployment.

Furthermore, once a deployment is complete, we use a cache cleaning technique to avoid server-side caching anomalies.

Things we have accomplished under React source code. 

1. Make use of memoization

Memoization allows you to cache the results of expensive or recursive function calls. When the same function is called again with the same parameters, the previously cached values are returned instead of requiring re-computation.

There are two ways to perform memoization:

1. Component memoizing using React.memo() Higher Order Component(HOC).
2. Use useMemo() react hook in order to wrap functions within a component.

2. Lazy loading components

When we have some components that are fine to load after the main content, we may use React.lazy() to load those components slowly.

Also, until the lazy-loaded component is loaded, react suspense can be used to display a loader type of component.