Bundling and minification of Angular 2 quick start project

Question

How to do bundling and minification of Angular 2 quick start project, to reduce HTTP requests on initial load ?

On load of first page of Quick start project, there are approx 300 http requests generated, which takes much time.

I read on some blog that bundling and minification can be helpful to reduce this calls.

angular 2 have many ways of doing so. Web pack SystemJs angular CLI

but I am not able to find how to use any of these with quick start project.

Answer 1

You can use the Angular Compiler to do this. There are several ways to make it happen.

Option 1: Docker If you are already using docker and/or docker-compose, this is a pretty good option, and super easy. I have made a container that can watch your application source and build it every time you save a file. You can use that container like so (beware, the image is about 600MB - sorry, angular compiler is actually huge!):

docker run --rm -v $(pwd)/src treyjones/ng build -w

In this case I'm assuming your app is in src.

You can also use this command to see the full help documentation for ng:

docker run --rm treyjones/ng -h

Actually finding the full documentation online has proved difficult, to me.

If you don't want to use docker for this, you can also just do what the container does, be warned, it is still a huge install, just through node instead of docker. Two options for this:

 npm i [email protected] -g

Option 2 - add it as a dependency of your project in package.json:

"devDependencies": {
    "angular-cli": "1.0.0-beta.24"
}

beta.24 is the latest version listed by npm. I have only used beta.18. However, I can confirm that the build process is very smooth and has worked very well for me.

You can read a little bit more about how this is intended to work on github.

Answer 2

To avoid loading hundreds of small files you typically create so called bundles using a bundler such as webpack. Webpack is a tool to resolve the dependencies within your project and provides good tooling around Typescript, Javascript, ES2015 module imports, and so on.

To get an idea of how things work have a look at the angular2-webpack-starter project.

Also the Angular CLI uses webpack under the hood.

If you're interested in using webpack let me say that the learning curve is quite steep. Don't start with trying to understand a full blown project such as the angular2-webpack-starter project mentioned above. Instead start with something more easy, for example the getting started section of the webpack tutorial.

Answer 3

The easiest way I found to do this, with tons of room for growth is using this "template" for angular 2 projects. It also gives you a great visualization when building for production. AoT, Minification, Webpack, etc... template