Angular2 CLI:为什么要打包"--prod"的包大小小于"--prod --aot"?

问题描述

我正在为项目使用最新的angular-cli(beta-18).我知道cli仍处于早期阶段，但是我对为什么我的最终捆绑包尺寸实际上较小而没有AoT感到困惑.

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.

当我运行ng build --prod时，它是1.08 mb:

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]

当我运行ng build --prod --aot时，它是1.26 mb.

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]

对于tsconfig来说:

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

推荐答案

我在在我们的GitHub上发布，但这是我的参考答案:

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

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

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.

这些库需要公开ES2015模块，并删除其装饰器，并已对其组件/模块进行AoT编译.我们正在为支持JIT和AoT编译的库制定准则.

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.

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

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.

这篇关于Angular2 CLI:为什么要打包"--prod"的包大小小于"--prod --aot"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！