Angular2 CLI: why bundle size of "--prod" smaller than "--prod --aot"?
angular, angular2-aot, webpack
Solution
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.
Problem
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" ] } ```