Angular2 CLI：为什么“--prod”的包大小小于“--prod --aot”？

Question

我正在为一个项目使用最新的 angular-cli (beta-18)。我知道 cli 仍处于非常早期的阶段，但我很困惑为什么我的最终包大小实际上更小没有 AoT。

当我运行 ng build --prod 时，它是 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]

当我运行 ng build --prod --aot 时，它是 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]

对于 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"
  ]
}

Answer 1

生成的模板JavaScript比模板本身大得多。这是文件大小与执行时间的权衡情况。

Answer 2

我在 issue on our GitHub 上回答了这个问题，但这里是我的回答以供参考：

如果您使用的某些库不支持 AoT（并发布 UMD 捆绑包），则可能会发生这种情况。原因是我们无法优化纯 JavaScript 的组件。不幸的是，这不是我们可以解决的问题。

这些库需要公开 ES2015 模块，并移除装饰器并且 components/modules 已经 AoT 编译。我们正在制定库指南以支持 JIT 和 AoT 编译。

此外，有时对于某些模板，AoT 大小可能大于 JIT。 gzip 版本应该是相反的，因为大多数 AoT 内容都是一遍又一遍地重复相同的语句。

虽然捆绑包更大，但 bootstrap 时间应该明显更快。

Angular2 CLI：为什么“--prod”的包大小小于“--prod --aot”？

Angular2 CLI: why bundle size of "--prod" smaller than "--prod --aot"?

webpack

angular2-aot

angular