Reduce Angular 2 file size for deployment

Question

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

Here are the steps I took

• ng new myProject
• cd myProject
• ng build --prod

And all the files inside my dist folder are: 1.1mb !! I believe that these are all the files needed for deployment. What is the best way to drop this as much as possible?

--- Update --- After running ng build -e = prod --prod --no-sourcemap --aot

the size approached approximately 500 kb. Which is 50% better. However, this post of Angular 2: Reduce application size noted that the file size reached 100? Looks like the guy was ignoring the fact that main.a2eb733289ef46cb798c.bundle.js for some reason is 452kb? Should I deploy ALL of my files in the dist folder, as shown in the image below? Or can I ignore some to reduce deployment size? I saw somewhere online that the angular team managed to remove a file size of up to 50K for the main application to run.

Answer 1

To reduce the size of the built-in, you should first look only at gzip files. If you configure your web server well, these are the only files that it will serve. You can even gzip your index.html and get this. Most web servers (e.g. nginx) have functionality for loading static gzip files. To enable this, put this in your nginx configuration:

 gzip on; gzip_static on; 

Apache has a similar module for loading static gzip files.

And every popular web server has at least the ability to serve dynamic gzipped files. This means that when a file is requested from a web server, it will be stuck during transport. This will be roughly the size of the generated gzip files that you see in your build folder.

To further reduce the application, I suggest using aot compilation, which will also use tree shake. To enable this and make sure your application receives the assembly in the production environment, use this command to build:

 ng build -e=prod --prod --no-sourcemap --aot 

In my assembly, I noticed that if I downloaded the files myself, using, for example, 7zip , and installed it with maximum compression, the file size would be further reduced. Keep in mind that when unpacking these files on the client side, more CPU will be used than fewer compressed files, but with recent processors this difference can be safely ignored.

The compiled vendor script also has many comment blocks (@license), you can try to run js files through another round of minimization to get rid of them and add one of them again on top of vendor.js

Update

You mentioned that in another question, the application size has decreased to <100kb. Yours will already be, you just need to look at the js.gz file, this is your compiled / compressed application, and not a simple js file. The 50kb you are talking about is on the roadmap for them. As far as I remember, they managed to get the file size even lower up to 20 KB, because they implemented their own closing compiler in combination with another archiving method (brotli)

The Closure compiler is a tool to speed up loading and running JavaScript. Instead of compiling from source language to native code, it compiles with JavaScript to improve JavaScript. It parses your JavaScript, parses it, removes dead code, and rewrites and minimizes what's left. It also checks syntax, variable and type references, and warns of common JavaScript errors.

That's why they hid the packaging implementation inside angular-cli . Moving to another building and compilation tool will be much easier to implement without confusing applications for people. It will be time, or even if they are going to realize it. While I say that 100kb is a pretty decent size for a frame that gives you so much :)