arrow_back Breaking the Monolithic Front-end (A HackerRank's case study)
Improving React App Performance : A Case Study
Submitted by Punit Sethi (@geekybiz) on Saturday, 20 April 2019
This talk shares our experience of performance optimizing our React App. The objective of the presentation is to talk how we measured the performance gain and detail the React & Webpack capabilities we leveraged to improve frontend performance.
Front-end developers looking to improve the performance of their SPAs (React, Angular, Vue) shall benefit from this talk. Key take-aways for them shall be:
- what are the Webpack & React performance optimization options avaialable - how to apply those optimizations - how to make performance optimization exercise effective
Some of the tools I intend to talk about are Webpack Bundle Analyzer, Chrome Devtools, WebpageTest. Some of the optimization capabilities I shall disccuss are related to tree shaking, code splitting, dynamic library loading, babel-preset-env plugin, vendor bundle webpack configuration, etc.
- How we measured our React App’s performance & improvement
- Performance metrics
- Test conditions
How we improved our React App’s performance
- Identified & removed unused libraries / part of libraries
- Code splitting with React’s lazy & suspense
- Identify & load specific libraries libraries dynamically
- Reduce babel transpiled code with babel-preset-env
Reduce download size with brotli-webpack-plugin
Details of Performance Improved
- Size of our JS Bundles
Punit Sethi is founder of Tezify - an org that offers tools & services to measure & improve front-end performance. Punit has worked on improving performance of various high-traffic Indian ecommerce websites. Prior to Tezify, Punit has been working on software performance for a decade.