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
Technical level: Intermediate Session type: Lecture
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.