Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 and Angular Cli tree shaking production build, vendor.js huge

I have done a small Angular 4 app, but I do not know how to apply tree shaking and aot compiling. the command I run is the following:

ng build --prod --aot

But the result I get is still huge, vendor file is 2.63Mb:

Hash: 3f2f9863802ffee21a18
Time: 35397ms
chunk    {0} polyfills.3be44b11f98572593d31.bundle.js (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.62b1e2f835ae0e344351.bundle.js (main) 537 kB {3} [initial] [rendered]
chunk    {2} styles.6ad044d12ab50a9da898.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.a13d6c29b7348e1ae91d.bundle.js (vendor) 2.63 MB [initial] [rendered]
chunk    {4} inline.01f2c419c67f5155d8a3.bundle.js (inline) 0 bytes [entry] [rendered]

Is this the final application, or something is wrong with ng cli?

This is my version of the CLI:

@angular/cli: 1.0.0-rc.4
node: 6.10.0
os: win32 x64
@angular/common: 4.0.0-rc.6
@angular/compiler: 4.0.0-rc.6
@angular/core: 4.0.0-rc.6
@angular/forms: 4.0.0-rc.6
@angular/http: 4.0.0-rc.6
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 4.0.0-rc.6
@angular/platform-browser-dynamic: 4.0.0-rc.6
@angular/router: 4.0.0-rc.6
@angular/cli: 1.0.0-rc.4
@angular/compiler-cli: 4.0.0-rc.6
like image 373
albanx Avatar asked Mar 23 '17 22:03

albanx


People also ask

Does Angular tree shake?

Shaking the tree It can be visualised as shaking a physical tree causing dead branches and leaves to fall off. One of the primary ways Angular looks for code to shake is by import paths. If a class or function is imported, it is used and can not be removed.

What is tree shaking mechanism in Angular?

The tree shaking mechanism removes unused portions of source and library code to reduce the downloaded size of the application. The tree shaking mechanism works only when you create the production bundle.

What is vendor JS in Angular build?

vendor. js : third-party code that your application depends on. polyfills. js : polyfills that allow using newer features in older environments (e.g., using Angular on outdated Web browsers) runtime.


1 Answers

Angular 4 prod build with tree shake and aot can be acheived by just running ng build --prod --aot flag not required now.

Build should look like this ( chunk {5} vendor.46351c4e9fc678f82bca.bundle.js (vendor) 1.13 MB [initial] [rendered] )

Note: in this output 1.13MB is not what you get, look your file size in /dist directory what you get is 316KB )

build output

what we get

like image 56
Hemant Kumar Singh Avatar answered Nov 15 '22 03:11

Hemant Kumar Singh