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

• www.tezify.com

Slides

https://docs.google.com/presentation/d/1xSyMUxSepixX7eK7KkieXsNhyrLiYrPhdIEbF3ZfNao/edit?usp=sharing