Reduce Angular 2 file size for deployment

Question

I am new and experimenting on Angular2. I have found that the files in dist folder is quite large with an empty project that was created by angular cli

Here are the steps I took

1. ng new myProject
2. cd myProject
3. ng build --prod

And all the files inside my dist folder are 1.1mb!! I believe they are all the files required for deployment. What are the best way to drop this as much as possible?

---Update--- After I run ng build -e=prod --prod --no-sourcemap --aot

the size got down to approximately 500kb. Which is 50% better. However, this post Angular 2: Reduce app size mentioned that the file size got down to <100kb. Seems like the guy ignored the fact that main.a2eb733289ef46cb798c.bundle.js is 452kb for some reason? Should I deploy ALL my files in the dist folder as shown in the image below? Or can I ignore some to reduce the size of deployment? I did see somewhere online that the Angular team managed to drop the file size down to 50kb for basic startup app.

Answer 1

To reduce the size of the built, you should at first only look at the gzip files. If you set your webserver up well, these are the only files it will serve. You can even gzip your index.html and have that served. Most webservers (for instance nginx) come with the functionality to load static gzip files. To enable this, place this in your nginx configuration:

gzip on;
gzip_static on;

Apache has a similar module to load static gzip files.

And every popular webserver has at least the option to serve dynamic gzipped files. Which means that when the file is requested from the webserver, it will get zipped during transport. This will be approximately the size of the generated gzip files you see in your build folder.

To even downsize the application more, I suggest to use aot compilation, which will use tree-shaking as well. To enable this, and to make sure your application gets build using the production environment, use this command to build:

ng build --prod

In my build I did notice that if I gzipped the files myself using 7zip for instance, and set it on the highest compression, the file size got even further reduced. Be aware though, that decompressing these files on the client side will use more CPU than less compressed files, but with recent CPUs, this difference can be safely ignored.

There are also a lot of comment blocks (@license) inside the compiled vendor script, you can try to run the js files through another round of minification to get rid of those and add one of them again on top of the vendor.js

update

You mention that in the other question the app size went down to < 100kb. Yours will already be that, you just have to look at the js.gz file, this is your compiled/zipped application, not the plain js file. The 50kb you are referring to is on the road map for them. As far as I remember they managed to get the file size even lower to 20kb, because they implemented their own closure compiler in combination with a different archiving method (brotli)

The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

This is why they've hidden the packaging implementation inside the angular-cli. Changing to another building and compiling tool will be much easier to implement, without messing up peoples application. It's going to be a while, or even if they are going to implement it. For now, I say that 100kb is a fairly decent size for a framework which is giving you so much :)