pcalchi

Integrating Angular-CLI into the VSTS build process and achieving optimal performance

Recently it’s been brought to my attention that an Angular 2 application I wrote was almost 1mb in size.  My application has a Bootstrap 3.0 dependency which is a likely contributing factor.  The concern (rightfully so) is that this may be contributing to a low conversion rate on our website; particularly on mobile devices.  Keep in mind that these Js contain all of my HTML templates as well as Angular code.

The solution presented below took the 1 Mb size download to a much more manageable 227 Kb.  Gulp is utilized heavily for all of the automation tasks that aren’t provided by the CLI out of the box.  The screenshots are based on an Angular-CLI project within a .Net Core 1.0x project; hence the references to the wwwroot folder.  VSTS is used to deploy and publish my .net Core code to Azure as well as execute the steps below.  Theoretically, you could use the steps below with another build automation system.

The only prerequisite is that you’ll have to install the CLI as a dev dependency.
npm i --save-dev angular-cli

This is what my CI process looks like today after the work mentioned below.
build-process

Pre Angular-CLI Build Step: (Gulp Task – preBuild)

  1. Modify your HTML so that static assets are served from a CDN. There may be better ways/plugins to this, but the “gulp-replace” plugin works well.
  2. Minify the HTML in your templates. The gulp-htmlmin plugin works well for this.  Reminder, Angular2 is case sensitive. This Gulp plugin will lower case all HTML elements and attributes unless you specify the caseSensitive option.prebuild

Angular CLI Build Step: (PowerShell or Command Line Task)

  1. Run the ng build --prod --aot command.ng-build-cmd

Post Angular CLI Build Steps: (Gulp Task – postBuild)

  1. GZip compress your style.*.bundle.css file.gzipcss
  2. For cache busting purposes we’ll use a random string generator.
    randomstringgen
  3. Concatenate, minify and GZip compress all of your Js files. gulp-concat, gulp-minify and gulp-gzip plugins work well for this. Make sure you use the random string in the output filename.
    bundleng2
  4. Putting it all together, minify and modify the index.html file to use the GZip compressed Css and Js files.  Again, using gulp-replace, gulp-htmlmin plugins along with some RegEx magic.
    postbuild
Posted in Angular 2, VSTSTagged , , , , , , , , , , , , , , 2 Comments

2 thoughts on “Integrating Angular-CLI into the VSTS build process and achieving optimal performance”

  1. Can you explain/show how you call ng build? i tried npm task with run-scripts “build” that points to a build script in package.json. Is this how you’re doing the build?

    Liked by 2 people

    Reply

  2. Tim,

    ng build is part of the Angular-Cli. If the command “ng build” doesn’t work in your environment, you’ll have to install the CLI globally first. The best documentation you can find on the CLI itself can be found at the team’s GitHub page https://github.com/angular/angular-cli#installation.

    Your question did get me thinking, “could we do everything mentioned in this article only using NPM”. Answer is, yes. Below you’ll find the scripts portion of my package.json file. Most of it is what you get when the CLI initializes a new project. I’ve added a new task “prodBuild” that will give you the same result as that mentioned in the article.

    “scripts”: {
    “ng”: “ng”,
    “start”: “ng serve”,
    “lint”: “tslint \”src/**/*.ts\””,
    “test”: “ng test”,
    “pree2e”: “webdriver-manager update –standalone false –gecko false”,
    “e2e”: “protractor”,
    “prodBuild”: “gulp preBuild && ng build –prod –aot && gulp postBuild”
    },

    Liked by 1 person

    Reply

Leave a comment