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
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With