Improving React App Performance : A Case Study

Nov 2019

11 Mon

12 Tue

13 Wed

14 Thu

15 Fri

16 Sat 08:55 AM – 05:20 PM IST

17 Sun

Make a submission

Accepting submissions till 01 Nov 2019, 03:15 PM

India International Centre (main building), New Delhi, New Delhi

Tickets

After a successful edition in Delhi in 2018, we are back with the 2019 edition of ReactFoo Delhi.

ReactFoo Delhi features talks and discussions on:

Redux and state management
Performance improvements with React
Modernizing legacy architecture with React
Why choose React Native
GraphQL and front-end development

Product and front-end engineers from Atlassian, Walmart.com, Zomato, Microsoft, HackerRank, Mindtickle and Appbase.io will share insights from practical experiences.

Who should attend:

Front-end engineers
Product engineers
Cross-platform mobile developers

Why attend ReactFoo Delhi:

Learn from and network with peers from the industry.
Improve developer productivity of your front-end teams.
Make your web applications faster and performant.

Date and schedule

16 November 2019
https://hasgeek.com/reactfoo/2019-delhi/schedule

Venue:

C D Deshmukh auditorium, India International Centre (IIC) Main, 40 Max Mueller Marg, Lodhi Gardens, Lodhi Estate, New Delhi - 110003.

##Contact details:
For information about the event, sponsorships, bulk ticket purchases and partnerships, write to info@hasgeek.com or call 7676332020.

Sponsors:

Click here to view the Sponsorship Deck.

Email us sales@hasgeek.com for bulk ticket purchases, and any queries on the sponsorship.

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more

All submissions

Previous Next

Improving React App Performance : A Case Study

Submitted Jul 18, 2019

Duration: 40 mins full talk

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.