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
underangularCompilerOptions
to change default valur for all projectpreserveWhitespaces: 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.
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
Top comments (0)