Every Performance tips for angular app

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
        }
    }
}

• Using Ivy Render Engine

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".

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

• Useing CSS Image Sprites: An image sprite is a collection of images put into a single image.
• SVG Sprites
• TinyPng Smart PNG and JPEG compression.

Using Gzip

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

• Apache 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

• Code Splitting - webpack
• Lazy-loading feature modules - angular

Server side render

• Server-side rendering (SSR) with Angular Universal
• Check Angular Universal repo to check availability to make server-side render with others langue like PHP (currently they are working on it)

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.

• Read this article: Angular Tools for High Performance
• Use: Webpack Bundle Analyzer
• Use: Lighthouse