Improving React App Performance : A Case Study

Jul 2019

1 Mon

2 Tue

3 Wed

4 Thu

5 Fri 09:00 AM – 05:15 PM IST

6 Sat

7 Sun

Make a submission

Accepting submissions till 22 Apr 2019, 11:59 PM

IT Block, Dr. G R Damodaran College of Science, Coimbatore

Tickets

##About JSFoo Coimbatore##

JSFoo Coimbatore is a single-day conference with talks, Birds of Feather (BOF) sessions and speaker connect sessions. The conference will be held on Friday, 5 July, at Dr.G.R.Damodaran College of Science, Coimbatore.

JSFoo Coimbatore features talks on:

How to secure your web applications by identifying vulnerabilities.
Leveraging Web Application Vulnerabilities for Resourceful Intelligence Gathering.
Case studies of performance improvements and using the modular approach to building front-ends.
Node.js and good engineering practices such as logging, debugging and integrating security into your applications.
WebSDK: switching between service providers on the fly.

Speakers from Hotstar, Uber, HackerRank, Chained Ventures, Tezify, Appsecco, Gramener, and Centre for Internet and Society (CIS) will present case studies and experiential talks which will help JavaScript, full stack and front-end engineers among partcipants to build faster, secure and performant we applications.

##JSFoo Coimbatore 2019 sponsors:

#Gold Sponsor

#Bronze Sponsor

#Community Sponsor

#Venue Partner

For inquiries on tickets and sponsorships, call the JSFoo Coimbatore team on 7676332020 or write to us on info@hasgeek.com

Hosted by

JSFoo

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more

All submissions

Previous Next

This submission has been added to the schedule

Improving React App Performance : A Case Study

Submitted Apr 20, 2019

Technical level: Intermediate Session type: Lecture

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.