CODEWITHSUNDEEP
angularangular-cli
ErnieKev
ErnieKev

Reputation: 3021

Angular 2 App Deploy Size Reduction

Below is a snapshot of my web app's network network tab that was built using Angular 2 and Angular CLI. I have cleaned the cache beforehand. As you can see, my largest file is 5.4mb which is the vendor.bundle.js file. Is that normal or is this file huge?!.

I am using the latest Angular CLI that utilizes AOT and TreeShaking. I have also implemented lazy loading so that only relevant components are loaded.

I followed firebase's guide to deploy my dist folder generated by ng build --prod to their hosting service using firebase deploy command in my terminal.

How can I further reduce the size or investigate which 'part' of my app is getting loaded that causes this size?

I have also found that when I use my mobile to load, it uses 2.2mb instead of the max size shown on my desktop which is 7.5mb. Is that normal?

screenshot

This is what I get for running ng--version

    node: 6.9.1
os: darwin x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 2.4.9

My Dist Folder is shown in the image below. Funny thing as well, there is no vendor.bundle.js that was shown in the network tab. Is it because firebase takes vendor.2ff9250938e6ffbe8462.bundle and 'unzip?' it to vendor.bundle.js (which went from 1.4mb to 5.4mb. or am I talking fairy tale here?)

Dist Folder

Upvotes: 3

Views: 748

Answers (1)

Ploppy
Ploppy

Reputation: 15353

I don't think you are using --prod, if you were, it would show a random hash after your bundle files (unless I'm missing something, is there a way to disable it?).

enter image description here

And here is how it should look in chrome once gzip is applied:

enter image description here

Angular 4 will be soon available and reduces the total app size by about 25%.

Also I might be wrong but it looks like your images are too heavy, you should try to compress them a bit. A 5% compression can sometimes save more 50% of the size of the image.

Upvotes: 2

Related Questions