- Knowledge about decoupled Architecture
- HTML and CSS
Web technologies and Frameworks have gone beyond since its origin. Today we talk about the latest Stack either with Decouple Drupal, Progressive Drupal or Drupal Integration with Other Stack, One thing always matter is web performance.
This talk is about our experience of performance-optimizing with our Decouple App (React JS). The objective of our exercise was to improve our app’s load time or performance in a few (4-6) weeks. This presentation details how we measured the gains and what React tools we can use to achieve this.
Front-end devs wanting to improve their Web Application performance shall find this talk insightful.
- what are the React performance optimization options available
- how to apply those optimizations
- how to make performance optimization exercise effective
- Tools and options to check web performance
- How performance matters for React Components
A few tools I intend to talk about are Webpack Bundle Analyzer, Lazy Load in React, Hooks and Context APIs, Choose Lightweight Library, Chrome Devtools, WebpageTest. Few optimization capabilities I shall discuss are related to tree shaking, code splitting, dynamic library loading, React Suspense and Context APIs, React Patterns to improve performance
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 dynamically
Reduce babel transpiled code with babel-preset-env
Reduce download size with brotli-webpack-plugin
I love Teaching developers, I always looking for speaking opportunity in different conf and meetups
Details of Performance Improved and final outcome