The wonders of file minification and compression are truly remarkable when you compare the file sizes of assets at each stage of optimization. While in development mode, our entire application weighs in at nearly 4.5 megabytes of resources. Building our Angular application with production mode (ng build -prod) will yield significant improvements in the total file size of our application, reducing our overall page size to a reasonable 1.4 megabytes. These reductions in file size are mostly due to the removal of source maps and unnecessary development mode code from the application as well as file savings through file minification.

However, with Gzip added to the equation, we can further compress our assets to an even smaller ~600 KB size. This compression is a totally lossless optimization that is equivalent to the full version of our application, but at nearly a one-third of the size. Looking across the various gzipped files in our /dist directory, we can see a compression on some files with as much as 1/20th the size of the original file:

This section also continues to demonstrate the flexibility afforded by upgrading parts of our application to TypeScript incrementally, instead of all at once. Something new that is worth noting about upgrading your legacy Express middleware TypeScript classes, is the need to manually bind the class's this property to the middleware:

constructor() {
    this.route = express.Router();
    this.angularBuildPath = path.resolve(__dirname, 'angular');
    this.indexPage = this.getIndexPage(this.angularBuildPath);
    this.route.get('*', this.serveRoute.bind(this));
}

Without this bind call on the method, we wouldn't have a reference to this inside our middleware when it is called by Express. The reason for this is that, while the middleware itself is defined once in our class, Express actually creates instances of this middleware when serving routes. This is due to the massively concurrent asynchronous approach to routing that makes Express so appealing as a web server. You could have multiple requests processing the same middleware in a sequence. However, it can be a tricky gotcha if you aren't careful when updating your Express middleware to use classes.