7

I'm using the latest angular-cli (beta-18) for a project. 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.

When I run ng build --prod, it's 1.08 mb:

                                 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]

When I run ng build --prod --aot, it's 1.26 mb.

                                 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]

For tsconfig looks like:

{
  "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"
  ]
}
Rob
  • 852
  • 1
  • 9
  • 22

2 Answers2

6

I answered this on an issue on our GitHub, but here is my answer for reference:

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.

Hans
  • 256
  • 2
  • 3
  • This is exactly the case... the CLI makes every effort to reduce the size of production builds. Education and tooling for libraries will help to ensure that they are following best practices. – Brocco Oct 24 '16 at 17:01
1

The generated template JavaScript is much bigger than the template itself. It's a file size vs execution time tradeoff situation.

pe8ter
  • 1,263
  • 12
  • 10
  • I dont think that's right ... when using AoT, the angular compiler does not need to be shipped to the browser with the rest of the bundle, and this leads to a "smaller Angular framework download size" because the "compiler is roughly half of Angular itself" according to the official angular docs: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#aot-jit – Rob Oct 23 '16 at 19:33
  • @Rob, I think he is talking about the templates (i.e., the HTML); not the total file size of the js. Yes, the compiler module does not need to be shipped but the 'compiled' templates can be bigger. – Brad Jan 06 '17 at 00:01