JSFoo Coimbatore 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.

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