Скачать или смотреть Squashing HTML into your Components

Once you start developing components for your Angular application, you will need to create html and CSS files that support your components.

First, let’s look at a TypeScript file which references an html template URL and a CSS style URL.

Let’s take a quick look at html file that is referenced within the “settings” component.

You can put the html directly into your components at design time, however, if you do that, you will not be able to benefit from using an html editor. So I like to use a separate html file, and then reference it within my component.

This works great running locally in Debug mode, but before bundling and preparing for deployment, it is a good idea to squash the html and CSS into the components. Let’s take a look at the JavaScript file generated from the TypeScript file.

Here is how it looks before we squash it.

Now I will squash it. I’ll squash it by double clicking on the squash Gulp task, but this can be done automatically by running the “bundle-app-release” Gulp task.

,,,,,, And, this is how it looks after I squash it. We just squashed both the html and the CSS into the component. And we did the same for all the components.

What does this do for us? It reduces the number of files downloaded which decreases the time to launch the application, which increases the performance. Big performance gain!