Every Performance tips for angular app
Tags: angular, javascript
Published: 2020-03-27 17:50:43

---
title: Every Performance tips for angular app
published: true
description:
tags: angular, javascript
series: Angular Performance
---




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](https://webpack.js.org/), [rollup](https://rollupjs.org/guide/en/), [Google Closure Compiler](https://developers.google.com/closure/compiler) and [angular-cli](https://cli.angular.io/) 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
```json
{
    "projects": {
        ...
        "production": {
             "aot": true,
             "sourceMap": false,
             "extractCss": true,
             "namedChunks": false,
             "vendorChunk": false,
             "optimization": true,
             "buildOptimizer": true,
             "extractLicenses": true
        }
    }
}
```

- Using [Ivy Render Engine](https://angular.io/guide/ivy)

## 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](https://twitter.com/mgechev) tweet this awesome [tweet](https://twitter.com/mgechev/status/1222538039055941632) "If you don't rely on enum values calculated at runtime, use const enums to decrease the size of your JavaScript bundles".

![Minko Tweet](https://pbs.twimg.com/media/EPdT3MzVAAEwqaB?format=jpg&name=4096x4096)

## 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](https://angular.io/api/core/Component#preserveWhitespaces)
- 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS): An image sprite is a collection of images put into a single image.
- [SVG Sprites](https://css-tricks.com/svg-sprites-use-better-icon-fonts/)
- [TinyPng](https://tinypng.com/) 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](https://varvy.com/pagespeed/enable-compression.html)

## Progressive Web App/ Service worker cache

- Use [app shell](https://angular.io/guide/app-shell) and offline feature as you can it will enhance both load and run time performance for sure.
- [Angular Service Worker](https://angular.io/guide/service-worker-intro) - 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](https://blog.angular-university.io/tag/angular-service-worker/)

## 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](https://webpack.js.org/guides/code-splitting/) - webpack
- [Lazy-loading feature modules](https://angular.io/guide/lazy-loading-ngmodules) - angular

## Server side render

- [Server-side rendering (SSR) with Angular Universal](https://angular.io/guide/universal)
- Check [Angular Universal](https://github.com/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](https://blog.angular.io/angular-tools-for-high-performance-6e10fb9a0f4a)
- Use: [Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)
- Use: [Lighthouse](https://developers.google.com/web/tools/lighthouse)