Improving React App Performance : A Case Study
Punit Sethi
@geekybiz
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.
Outline
- How we measured our React App’s performance & improvement
- Performance metrics
- Test conditions
-
Tools
-
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
- Timings
- Size of our JS Bundles
Speaker bio
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.
Links
Slides
https://docs.google.com/presentation/d/1xSyMUxSepixX7eK7KkieXsNhyrLiYrPhdIEbF3ZfNao/edit?usp=sharing
{{ errorMsg }}