{"id":2420,"date":"2018-04-09T15:55:07","date_gmt":"2018-04-09T13:55:07","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2420"},"modified":"2018-04-09T15:55:07","modified_gmt":"2018-04-09T13:55:07","slug":"clever-white-space-handling","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/clever-white-space-handling\/","title":{"rendered":"Clever White Space Handling"},"content":{"rendered":"
\n

\nThis post is part of my Angular Performance Tuning article series<\/a>. If you looking for ways to make your Angular application faster, you might find the other articles in this series useful too.\n<\/p><\/blockquote>\n

Update:<\/strong> This optimization technique has now been merged into Version 4.4.0-rc.0 too.<\/p>\n

Update 2:<\/strong> Beginning with Angular 6.0.0-beta.6 this optimization option is activated by default. You can deactivate it using the the configuration entries outlined below.<\/p>\n

Although tuning an application\u2019s performance can be difficult, sometimes all we need to do is laying back and waiting for the next version of the used framework. This especially holds true for Angular as the Core Team is working constantly on improving things under the hoods. A good example for this is the conciser code the Angular Compiler emits beginning with Version 4 or the Angular Bundle Optimizer<\/a> that transforms code to make it more treeshakable.<\/p>\n

On more of this optimization techniques landed with 5.0.0-beta.4<\/a> about two weeks ago. It allows the compiler to remove unneeded (consecutive) white spaces from text nodes and to remove even whole text nodes that only contain white space characters. This leads to less code emitted by the AOT compiler and therefore to smaller bundle sizes as well as faster start up times.<\/p>\n

In this post I\u2019m describing how to use it, which performance gains I measured when applying to an example application as well as how this approach works under the covers. The example application<\/a> I\u2019ve used for this can be found in my GitHub repository<\/a>.<\/p>\n

<\/a>Removing white spaces<\/h2>\n

While removing white spaces from HTML is most of the time a safe operation (at least when respecting some rules outlined below), it can also destroy your layout. Because of this, you can opt-out from it. For instance, you could do this on component level by setting the new property preserveWhitespaces<\/code> to true<\/code>:<\/p>\n

@Component({\n  selector: 'app-passenger-search',\n  templateUrl: '.\/passenger-search.component.html',\n  styleUrls: ['.\/passenger-search.component.css'],\n  preserveWhitespaces: true\n})\nexport class PassengerSearchComponent  {\n}\n<\/code><\/pre>\n
Instead of this, you can also opt-out for your whole application by using the flag preserveWhitespace<\/code> in your tsconfig.app.json<\/code>:<\/p>\n
[\u2026]\n\"angularCompilerOptions\": {\n    \"preserveWhitespaces\": true\n}\n[\u2026]\n<\/code><\/pre>\n
If you use the Angular CLI please make sure you add this to the file tsconfig.app.json<\/code> and not to your tsconfig.json<\/code>.<\/p>\n
In addition to this, you can protect a section within a template by adding the attribute ngPreserveWhitespaces<\/code> to a tag. If you want to spot a space that isn\u2019t allowed to be removed, you can use the pseudo-entity &ngsp;, which is converted to a space in the emitted code. Don\u2019t confuse this with the well known   entity.<\/p>\n
<\/a>Results for example application<\/h2>\n
When I applied this optimization technique to my example application<\/a>, I got the following results:<\/p>\n