DEV Community: sathish bottula

How did I improve angular app performance drastically?

sathish bottula — Sat, 16 Jan 2021 14:23:30 +0000

Initially, I checked my app first meaningful paint time, it was showing 17secs and performance rating was 20 per cent. Finally, I was able to reduce to 5secs meaningful paint time and 70 performance rating using the below methods.

1. Reusable Components

First, figure out where there is a possibility to reuse components. It helps you to reduce app size.

2. Lazy Loading

Lazy loading helps you to load certain modules only when needed rather than loading all things at a time.

https://angular.io/guide/lazy-loading-ngmodules

3. Caching with Service Worker

Angular pwa help you cache assets and apis too. I used service worker to cache assets and some apis which are not gonna change frequently. You have even an option to give expire time for cache.

4. Lazy load scripts

You can load some external js scripts dynamically rather than loading all at the initial time.

https://thecodeframework.com/angular-how-to-lazy-load-external-scripts/

Try to use async and defer depends upon the scripts which you imported, it helps you to load scripts asynchronously with page parsing and after page parsing.

https://javascript.info/script-async-defer

5. Import what you need

When we import ui libraries, we import all components rather than importing what are we using.

Let me explain in detail, rather than importing whole library css

import 'antd/dist/antd.css';

you can import what all needed

import 'antd/lib/notification/style/css';
import 'antd/lib/modal/style/css';
import 'antd/lib/spin/style/css';
import 'antd/lib/select/style/css';

6. Image Thumbnails

In some cases, we don't have to show high-resolution pic. Even if we see flipkart and amazon products list there you don't have to show high-resolution pic. Figure out where all you can just show a thumbnail.

7. Lazy Load Images

Rather than loading all images when page loads you can lazy load images means when user gonna interact ui then only we load the image. Suppose if you have multiple sections with images rather than loading all sections images at a time you can load images when user gonna interact.

8. Shared Modules

Creating shared modules allows you to organize and streamline your code. You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your app

https://angular.io/guide/sharing-ngmodules

Tools which help you to improve web app performance

sathish bottula — Sun, 10 Jan 2021 05:17:33 +0000

1.Light House (Google)

Google Lighthouse is an open-source, automated tool for measuring the quality of web pages.I used google light house which really helps you to improve your app performance.

https://developers.google.com/web/tools/lighthouse

2.GT Metrix

GTmetrix is a free tool that analyzes your page's speed performance. It's also a similar tool you can place you are url and check the performance.(now GTmetrix is powered by lighthouse)

https://gtmetrix.com/

How to use reduce with React?

sathish bottula — Sun, 01 Nov 2020 00:33:54 +0000

What is the use of reduce in Javascript?

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.

let a=[1,5,6,7,8];
let total=a.reduce((total,currentValue)=>total+currentValue)
console.log(total);//prints 27

In the above example, we are using reduce for sum of array.

What in case if you want to pass a value to accumulator?

reduce accepts two params function, param.

let a=[1,5,6,7,8];
let total=a.reduce(((total,currentValue)=>total+currentValue),20)
console.log(total);//prints 47

How to use reduce in react now?

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    let a=[1,5,6,7,8];
    let total=a.reduce(((total,currentValue)=>total+currentValue),20)

    return (
      <div>
        Total sum is {total}    
      </div>
    )
  }
}