我使用最新的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"
]
}
答案 0 :(得分:6)
我在issue on our GitHub上回答了这个问题,但这是我的回答:
如果您使用的某些库不支持AoT(并发布UMD捆绑包),则可能会发生这种情况。原因是我们无法优化纯JavaScript的组件。不幸的是,这不是我们可以解决的问题。
这些库需要公开ES2015模块,去掉它们的装饰器,并且它们的组件/模块已经被AoT编译。我们正在制定库的指南,以支持JIT和AoT编译。
此外,有时使用某些模板,AoT大小可能比JIT大。 gzip压缩版本应该是另一种方式,因为大多数AoT内容是反复重复的相同语句。
虽然捆绑包较大,但引导时间应该明显加快。
答案 1 :(得分:1)
生成的模板JavaScript比模板本身大得多。它是文件大小与执行时间权衡情况。