ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Improving React App Performance : A Case Study

Submitted by Punit Sethi (@geekybiz) via Zainab Bawa (@zainabbawa) on Thursday, 18 July 2019

Duration: 40 mins full talk

Abstract

This talk is about our experience of performance optimizing our React App. Objective of our exercise was to quantifiably improve our app’s performance in a few (4-6) weeks. This presentation details how we measured the gains and what React + Webpack changes we leveraged to achieve the gains.

Front-end devs wanting to improve their React SPA performance shall find this talk insightful. Key take-aways:
- what are the Webpack & React performance optimization options avaialable
- how to apply those optimizations
- how to make performance optimization exercise effective

Few tools I intend to talk about are Webpack Bundle Analyzer, Chrome Devtools, WebpageTest. Few optimization capabilities I shall disccuss are related to tree shaking, code splitting, dynamic library loading, babel-preset-env, vendor bundle webpack configuration, brotli, 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

Requirements

None

Speaker bio

Punit Sethi is founder of Tezify. Tezify.com 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