Performance optimization techniques we are using in Asgardeo — Part 02

Asgardeo — Identity as a Service (IDaaS)

This is the part 02 of the series. Therefore, if you didn’t go through the part 01 of the series, highly recommended for you to go through the part 01 first.

Performance optimization techniques we are using in Asgardeo — Part 01

Asgardeo is an IDaaS empowering developers to build seamless login experiences in minutes as mentioned in the official website.

In this article lets focus on the techniques used in the react and webpack for performance optimization.

Things we have done on Webpack configurations. ✨

1. Using production over development mode

By using production mode itself provides built-in optimization by webpack. It includes modification, tree-shaking, etc. Additionally `env.NODE_ENV` environment variable can make used to set up the environment to ‘production’.

With production mode, if the bundle is analyzed with bundle-analyzer-plugin it clearly shows that bundle size is drastically reduced in the production mode compared to development.

Furthermore, when the production mode is enabled we perform compression using Brotli plugin along with a fallback for Gzip.

2. Bundle splitting using SplitChunks plugin

Generally, webpack builds a single bundle.js file with the bundled javascript. The SplitChunks plugin chunks the bundle into multiple chunks.

// webpack.config.js
module.exports = {
  //...
  optimization: {
    splitChunks: {
      // include all types of chunks
      chunks: 'all',
    },
  },
};

As mentioned in the webpack documentation:

“Providing all can be particularly powerful, because it means that chunks can be shared even between async and non-async chunks”

Even though this step doesn’t reduce the bundle size, now its possible to cache common chunks across pages.

3. Minify i18n internationalization JSON files

We use json-minimizer-webpack-plugin along with a JSON loader to minify JSON files. It reduced file size and the loading time of these files in 50%.

4. Server-side caching

Server side caching is used only for caching static assets. In this case, a special thing to note is, in the SplitChunks plugin it names each file name with a hash based on the content in each chunk. It helps to maintain a serverside caching mechanism as in each build and deployment it generates a new hash for each chunk file name.

Furthermore, we use a cache purging mechanism once a deployment is done to avoid anomalies in serverside caching.

Things we have done under React source code. ✨

1. Make use of memoization

Memoization allows kinda caching the values of expensive or recursive function invocations. In that case, when the same function is invoked next time, with the same parameters, the previously cached values are returned over 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, which is quite fine to load after loading the main content, we can make use of React.lazy() to lazy load those components.

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

Secure your web apps using Asgardeo — Click here to start for free

Cheers 🎉