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

View proposal in schedule

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