Angular Build Optimisation: A Comprehensive Guide

Sumit Samanta — Mon, 22 Jul 2024 10:04:54 +0000

Angular is a powerful framework for building complex web applications. However, as your Angular application grows, you might start to notice that your build times are getting longer and your bundle sizes are growing. This can slow down your development process and negatively impact your users’ experience. In this article, we’ll explore some strategies for optimizing your Angular builds.

Understanding Angular Builds

Before we dive into optimization strategies, it’s important to understand what happens when you build an Angular application. When you run the ng build command, Angular’s build system, Angular CLI, performs several tasks:

Compilation: Angular CLI uses the TypeScript compiler to convert your TypeScript code into JavaScript.
Bundling: The JavaScript code is then bundled together using a tool called Webpack.
Minification: The bundled code is minified to reduce its size.
Tree Shaking: Unused code is removed during a process known as tree shaking.

Optimization Strategies
Now that we understand what happens during an Angular build, let’s look at some strategies for optimizing your builds.

Use the Production Build
When you’re ready to deploy your application, always use the production build (ng build --prod). The production build enables several optimizations that are not included in the development build, such as AOT (Ahead-of-Time) compilation, minification, and tree shaking.

Enable Lazy Loading
Lazy loading is a design pattern that delays the loading of non-critical resources at page load time. In Angular, you can implement lazy loading by using the Angular Router to only load modules when they are needed.

Use Angular Universal
Angular Universal is a technology that allows you to run your Angular application on the server. This can significantly improve the initial load time of your application.

Keep Your Dependencies Up-to-Date
Keeping your dependencies up-to-date can also help improve your build times. Newer versions of dependencies often include performance improvements and bug fixes.

Conclusion
Optimizing your Angular builds can significantly improve your development process and your users’ experience. By understanding how Angular builds work and implementing the strategies discussed in this article, you can ensure that your Angular application is as efficient as possible.

How to Add a Build Number to the Web Build in Angular

Sumit Samanta — Tue, 15 Aug 2023 05:18:47 +0000

Have you ever found yourself wondering which version of a web build is running when you deploy your angular code? By adding some scripts to the angular build command I was able to solve this problem.

Instructions

Step 1 - Adding version in your environment file

In your environment.ts file, add a version property from the package.json



export const environment = {
  production: true,
  version: require('../../package.json').version,
};

Step 2 - Create a build number by using the current time and previous build number

Create a build-version.js file on the root folder and add the following:



const { writeFileSync } = require('fs');
const { join } = require('path');

const BUILD_VERSION_PATH = join(__dirname, 'src/build-version.json');

function getTimestampBasedVersion() {
  return parseInt(new Date().getTime() / 1000);
}

let currentIteration = getTimestampBasedVersion();

try {
  currentIteration =
    require('./build-version.json')?.currentIteration ||
    getTimestampBasedVersion();
} catch (e) {
  currentIteration = getTimestampBasedVersion();
}

const buildVersion = {
  currentIteration: currentIteration + 1,
  buildVersion: `${
    require('./package.json')?.version
  }-build.${currentIteration}`,
};

writeFileSync(BUILD_VERSION_PATH, JSON.stringify(buildVersion, null, 2));

This will try to fetch the previous build number from the build-version.json file and increment it by 1, if this file is not found then it will use the current timestamp as the build number.

The fs.writeFileSync() creates a new file if the specified file does not exist.

The path.join() method is used to join a number of path-segments using the platform-specific delimiter to form a single path.

Add build-version.json to the .gitignore file so that it does not create a commit on the build generation.

If you don’t want the current timestamp as the build number then you can start with 1 as the initial build number.



const { writeFileSync } = require('fs');
const { join } = require('path');

const BUILD_VERSION_PATH = join(__dirname, 'src/build-version.json');

let currentIteration = 1;

try {
  currentIteration =
    require('./build-version.json')?.currentIteration || currentIteration;
} catch (e) {
  currentIteration = 1;
}

const buildVersion = {
  currentIteration: currentIteration + 1,
  buildVersion: `${
    require('./package.json')?.version
  }-build.${currentIteration}`,
};

writeFileSync(BUILD_VERSION_PATH, JSON.stringify(buildVersion, null, 2));

This approach could fail if the deployment creates a new docker image every time, then the build number will always be 1. So in those cases, we can use the current timestamp as the build number.

Step 3 - Adding bash script to generate the build number

Create a build-version.sh file and add the following:



node build-version.js
printf "\n\n"
cat src/build-version.json
printf "\n\n"

This will generate the build version and also print the build number on the console of the docker’s or Jenkin’s console.

Step 4 - Showing the build number on the web browser

Add the following code snippet to the app.component.ts to show the build number on the console of the web browser



import { Component } from '@angular/core';

import { environment } from 'src/environments/environment';

import * as build from '../build-version.json';

@Component({

  selector: 'ra-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss'],

})

export class AppComponent {

constructor() {

    this.displayBuildVersion();

  }

/**



To display the current build version on the console

*/

displayBuildVersion(): void {

console.log(

  %cCurrent version: </span><span class="p">${</span><span class="nx">environment</span><span class="p">.</span><span class="nx">version</span><span class="p">}</span><span class="s2">,

  background: #0082af; padding: 8px 12px; border-radius: 4px; color: #fafafa; font-size: x-large

);

try {

  console.log(

    %cCurrent build number: </span><span class="p">${</span><span class="nx">build</span><span class="p">?.</span><span class="nx">buildVersion</span><span class="p">}</span><span class="s2">,

    background: #0082af; padding: 8px 12px; border-radius: 4px; color: #fafafa; font-size: large

  );

} catch (e) {

  console.warn(e);

}

}

}

Step 5 - Running the build version script along with the angular build commands

Add the build version script build-version.sh to the build commands in the package.json



{

  ...

  "version": "1.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build:prod": "bash build-version.sh && ng build --configuration production --aot",

    "watch": "ng build --watch --configuration development",

    "test": "ng test --code-coverage",

    ...

  },

  ...

}

Step 6 - Running your angular build and generating the build number

Once you run the build and deploy the code on the server you will be able to see the build numbers during the build in docker or Jenkins and also in the deployed website.

Last thoughts

Now you’ve added the build numbers, build again and again to see the build version being incremented on each build.

Happy coding!

DEV Community: Sumit Samanta