Angular-cli: Bundle size of “ng build --prod” smaller than “build --prod --aot”?

[rsinger86]

I know the cli is still in very early stages, but I'm perplexed as to why my final bundle size is actually smaller without AoT, i.e. why does “ng build --prod” create a smaller bundle than “build --prod --aot”?

WITHOUT AoT (ng build --prod):

                                 Asset       Size  Chunks             Chunk Names                                                        
   main.53d637ff9422b65418e6.bundle.js    1.08 MB    0, 2  [emitted]  main                                                               
 styles.01cffb95000fdb84402c.bundle.js     8.9 kB    1, 2  [emitted]  styles                                                             
                             inline.js    1.45 kB       2  [emitted]  inline                                                             
  main.53d637ff9422b65418e6.bundle.map    7.24 MB    0, 2  [emitted]  main                                                               
styles.01cffb95000fdb84402c.bundle.map    40.3 kB    1, 2  [emitted]  styles                                                             
inline.d41d8cd98f00b204e980.bundle.map    13.5 kB       2  [emitted]  inline                                                             
main.53d637ff9422b65418e6.bundle.js.gz     236 kB          [emitted]                                                                     
                            index.html  907 bytes          [emitted]                                                                     
                     assets/.npmignore    0 bytes          [emitted]                                                                     
                           favicon.ico    5.43 kB          [emitted] 

WITH AoT (build --prod --aot):

                                 Asset       Size  Chunks             Chunk Names                                                        
styles.01cffb95000fdb84402c.bundle.map    40.3 kB    1, 2  [emitted]  styles                                                             
     0.688d48f52a362bd543fc.bundle.map    2.94 kB          [emitted]                                                                     
 styles.01cffb95000fdb84402c.bundle.js     8.9 kB    1, 2  [emitted]  styles                                                             
                             inline.js    1.45 kB       2  [emitted]  inline                                                             
  main.6490041404a193461c3c.bundle.map    6.81 MB    0, 2  [emitted]  main                                                               
   main.6490041404a193461c3c.bundle.js    1.26 MB    0, 2  [emitted]  main                                                               
inline.d41d8cd98f00b204e980.bundle.map    13.5 kB       2  [emitted]  inline                                                             
main.6490041404a193461c3c.bundle.js.gz     223 kB          [emitted]                                                                     
                            index.html  907 bytes          [emitted]                                                                     
                     assets/.npmignore    0 bytes          [emitted]                                                                     
                           favicon.ico    5.43 kB          [emitted] 

My tsconfig:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es6",
      "dom"
    ],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "exclude": [
    "**/*.spec.ts"
  ]
}

http://stackoverflow.com/questions/40205903/angular2-cli-why-bundle-size-of-prod-smaller-than-prod-aot

OS?
Linux version 3.13.0-37-generic (buildd@kapok) (gcc version 4.8.2 (Ubuntu 4.8.2-19ubuntu1) ) #64-Ubuntu SMP Mon Sep 22 21:28:38 UTC 2014

Version?
angular-cli: 1.0.0-beta.18
node: 6.6.0

[hansl]

If you're using certain libraries that do not support AoT (and release UMD bundles) this might happen. The reason is that we cannot optimize components that are pure JavaScript. This is not something we can fix on our side, unfortunately.

Those libraries need to expose ES2015 modules with their decorators removed and their components/modules already AoT compiled. We are working on guidelines for libraries to support both JIT and AoT compilation.

Also, sometimes with some templates the AoT size might be larger than the JIT. The gzipped versions should be the other way around, as most of the AoT content is the same statements repeated over and over.

Although the bundle is larger, the bootstrap time should be significantly faster.

[yfain]

we cannot optimize components that are pure JavaScript

Does it also mean that if I write the same Angular app in TypeScript and in JavaScript the JS version will alway produce larger bundles?

[rsinger86]

Thanks, I understand now. Perhaps some warnings in the cli's build output log when non-AoT compatible libraries are encountered would be useful.

[hansl]

@yfain: more precisely, the JS version will not be tree shaken.

[hansl]

@rsinger86: we're looking to do something like this.

[arunsaibk]

I am seeing with AOT , the bundle size is small in above screenshot, am I missing something?

In AOT there are one additional line
0.688d48f52a362bd543fc.bundle.map 2.94 kB [emitted] Are you referring this ?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}