DEV Community

Cover image for Improve React App Performance - Redux/Saga Code Splitting-[ Part 2 ]
Rupesh Padhye
Rupesh Padhye

Posted on

Improve React App Performance - Redux/Saga Code Splitting-[ Part 2 ]

In Part I Post, I shown before and after performance report of SaaS frontend app.

Main bundle size was reduced from 5mb to around 1.5mb ๐Ÿฅณ by following below approaches.
Let us deep dive how we achieved it.

Code Splitting At Multiple Levels

React supports code splitting out of the box with React.lazy.

๐Ÿ‘‰ Don't load the code you don't need to

๐Ÿš„ Route Based Code Splitting
Route based code splitting means creating different chunk for each page. e.g. If user is visiting home page web browser will only request required JS bundle for home page.

Route Code Splitting

๐Ÿš„ Lazy Load Third Party Libraries
Several third party libraries were added in main vendor chunk which wasn't required in initial load.

๐Ÿ‘‰ We converted the imports to async/await which loaded libraries on demand.

Third party Libraries

Lazy loaded third party components with withLazyLoader. It is the HOC wrapping React.lazy which handles named exports as well.

Lazy load react-color library

๐Ÿš„ on Demand Redux/Redux-Sagas

Still there was lot of reducers/sagas code were present in main bundle. We dig further and figured it out as the app has one root reducer which is normally generated by combineReducers() which was passed to createStore. Similarly there is root Saga aggregates multiple Sagas to a single entry point for the sagaMiddleware to run. Unfortunately redux doesnโ€™t offer a built-in API to on demand load reducers.

We came across the redux-dynamic-modules library. This library introduces the concept of a 'Redux Module', which is a bundle of Redux (reducers, middleware) that should be dynamically loaded.
It is not actively maintained by Microsoft team though stable enough to use in production.

  • High Order Component for DynamicModuleLoader component
    withDynamicModuleLoader HOC

  • Registering Required Sagas/Reducers for the Home Page
    Dynamic Module

  • Usage in HomePage component
    Usage in component

โ™ฅ๏ธ Don't forget to like, follow & share in your network if you are interested in frontend optimisation and want to make web better.

Stay tuned for next posts ๐Ÿ˜Ž

WebPack Optimisation-[ Part 3 ]
Bundle Analysis & Keep Bundle In Check -[ Part 4]

Top comments (0)