JSFoo Coimbatore 2019

On building faster, performant and secure web applications

Participate

Improving React App Performance : A Case Study

Submitted by Punit Sethi (@geekybiz) on Saturday, 20 April 2019

videocam_off
Technical level: Intermediate Session type: Lecture

Vote on this proposal

Login to vote

Total votes:  +1

Abstract

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

Comments

Login with Twitter or Google to leave a comment