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.

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.jsmodule.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 🎉

--

--

--

Identity and access management is taking over and is a key enabler to build agile businesses. Open source IAM specifically is becoming a game changer. Learn from IAM experts at WSO2 as to why IAM is all the rage and how it can help empower your enterprise.

Recommended from Medium

Making plain JS objects iterable — II

React best practices and patterns to reduce code

React best practices and patterns to reduce code | Rahul Sharma(devsmitra)

Building Custom Elements/Web Components with Angular 6

Add Dependency Injection to a React/Typescript project

The Importance of Making Things

Learn React JS in 5 minutes

//platform.twitter.com/widgets.js from Twitter https://twitter.com/thehikeexperts

DATE_TIME functions in Sql server

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yathindra Kodithuwakku

Yathindra Kodithuwakku

Find me @ yathindra.com

More from Medium

Performance optimization techniques we are using in Asgardeo — Part 01

Research project: Which is the best caching strategy with GraphQL for a big relational database?

Contributing to OSS with reproducible bug reports

Screenshot of this replay: https://app.replay.io/recording/excalidraw-4625-resizing-to-close-to-0-widthheight-locks-up--3b5f5120-e0b3-4e6f-a44b-c164fa2db4f9

[React] Swiper with Pagination Sample