loading...

Every Performance tips for angular app

imm9o profile image Islam Muhammad Updated on ・3 min read

In this post, I have mentioned here every performance tips for angular app Load Time and in another post, I will mention run time performance tips. Just keep in mind that here in this post is just a brief list with links for more details.

Load Time Performance

In this section all tips and tricks valid for both angular/javascript app, in general using bundle tool like webpack, rollup, Google Closure Compiler and angular-cli will help you to achieve that.

We can summarize this section into one word Make it small and few.

Uglify/Minify: Is the process of mangling, removing white space, comments... etc

By default this flag enabled under production enviroment when you use angular-cli or you can add it by yourself in angular.json file

{
    "projects": {
        ...
        "production": {
             "aot": true,
             "sourceMap": false,
             "extractCss": true,
             "namedChunks": false,
             "vendorChunk": false,
             "optimization": true,
             "buildOptimizer": true,
             "extractLicenses": true
        }
    }
}

Tree-shaking: Is the process of removing unused/dead code

Removing any unused and unnecessary import/code from your code will help to produce small bundle size.

  • Use @Injectable({ providedIn: 'root' }) for service this will help angular to avoid bundleing service code if not used.
  • Use tree-shakable-libraries like rxjs v.6 ... etc.
  • Use ES6 modules.

Use const enum: Typescript

  • Minko tweet this awesome tweet "If you don't rely on enum values calculated at runtime, use const enums to decrease the size of your JavaScript bundles".

Minko Tweet

Remove template whitespace

The ComponentMetadata interface provides the property preserveWhitespaces which by default has value false meaning that by default the Angular compiler will trim whitespaces to further reduce the size of our application.

  • preserveWhitespaces In angular doc
  • You can also add this flag in tsconfig.ts under angularCompilerOptions to change default valur for all project preserveWhitespaces: false

Compress images/audio/video

Using Gzip

Gzip is a method of compressing files for faster network transfers, make sure to enable it on your server.

Progressive Web App/ Service worker cache

  • Use app shell and offline feature as you can it will enhance both load and run time performance for sure.
  • Angular Service Worker - aims to automate the process of managing Service Workers. It also contains Service Worker for caching static assets and one for generating application shell.
  • Angular PWA

Lazy loading / Code Splitting

Lazy loading: is the mechanism to defer loading modules and loading it when we need it, by using Code Splitting features

Server side render

Gradually enhance tools

Keep in mind that If you can't measure it you can't enhance it, so in this section, I mention some tips and tricks to keeping eye on your code and warning you if something went wrong like bundle size becomes bigger or if there any code should not be bundled .... etc.

Posted on by:

imm9o profile

Islam Muhammad

@imm9o

Discovery 🔍 requires experimentation ⚗ and this experiment will take time 🕐.

Discussion

pic
Editor guide