This post is a write-up of an experiment where I measure the impact of removing whitespace from Ahead of Time Compiled (AoT) templates.
I won’t get into the details of AoT in this post.
If you are new to AoT, I invite you to check out my Google Meetup talk about AoT and Prod builds here.
During AoT, what happens to whitespace elements in the original templates?
This is not desirable since whitespace between elements is typically not significant when rendered by the browser.
To be fair, Uglify doesn’t know that these strings actually represent html elements where whitespace is generally not significant.
The good news is that Angular 5 will offer a way to remove whitespace during AoT.
So how much of a difference does whitespace removal make?
The results will vary based on the size of the templates in your application. I tested it with a “medium” size application, and noticed a difference of only 1k (gzipped).
Larger apps will likely benefit more though.
However, there is a limit to how much you can gain from removing whitespace. Most people just don’t include large amounts of whitespace in their templates.
That said I encourage you to try it in your own application. It’s basically “free” optimization since all you have to do is flip a flag to remove template whitespace.