Angular 2 和 Angular Cli 摇树生产构建，vendor.js 巨大答案

【问题标题】：Angular 2 and Angular Cli tree shaking production build, vendor.js hugeAngular 2 和 Angular Cli 摇树生产构建，vendor.js 巨大
【发布时间】：2017-03-23 22:31:08
【问题描述】：

我做了一个小的 Angular 4 应用程序，但我不知道如何应用树抖动和 aot 编译。我运行的命令如下：

ng build --prod --aot

但我得到的结果仍然很大，供应商文件为 2.63Mb：

Hash: 3f2f9863802ffee21a18
Time: 35397ms
chunk    {0} polyfills.3be44b11f98572593d31.bundle.js (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.62b1e2f835ae0e344351.bundle.js (main) 537 kB {3} [initial] [rendered]
chunk    {2} styles.6ad044d12ab50a9da898.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.a13d6c29b7348e1ae91d.bundle.js (vendor) 2.63 MB [initial] [rendered]
chunk    {4} inline.01f2c419c67f5155d8a3.bundle.js (inline) 0 bytes [entry] [rendered]

这是最终的应用，还是ng cli有问题？

这是我的 CLI 版本：

@angular/cli: 1.0.0-rc.4
node: 6.10.0
os: win32 x64
@angular/common: 4.0.0-rc.6
@angular/compiler: 4.0.0-rc.6
@angular/core: 4.0.0-rc.6
@angular/forms: 4.0.0-rc.6
@angular/http: 4.0.0-rc.6
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 4.0.0-rc.6
@angular/platform-browser-dynamic: 4.0.0-rc.6
@angular/router: 4.0.0-rc.6
@angular/cli: 1.0.0-rc.4
@angular/compiler-cli: 4.0.0-rc.6

【问题讨论】：

也许这是一个错误？今天更新了一个angular 2的小app到angular 4，vendor.js文件从380KB增加到1.3MB，scripts.js文件从95.3KB增加到545KB。
我认为在最后一个版本中，AOT 自动成为ng 的默认值。不过我可能错了。我自己使用ngc 来控制部署的内容，我的整个网站（Angular 2 的东西 + 一些第三方库、引导程序、我自己的 CSS 文件和大约 30 个组件）压缩后约为 350kb。
使用source-map-explorer。

标签： angular angular-cli

【解决方案1】：

只需运行ng build --prod --aot 标志，即可使用 tree-shaking 和 aot 构建 Angular 4 prod，现在不需要。

构建应如下所示（块 {5} vendor.46351c4e9fc678f82bca.bundle.js (vendor) 1.13 MB [initial] [rendered]）

注意：在这个输出中，你得到的不是 1.13MB，在 /dist 目录中查看你得到的文件大小是 316KB）

build output

what we get

【讨论】：

补充一点，这是 CLI 中的一个错误（在构建输出中显示错误的文件大小），自版本 1.3.x 以来已得到修复。