Angular CLI - 为什么<ng serve>比<ng build>更好地捆绑？

Question

执行一系列 Angular CLI 命令，以构建被压缩的基础项目：

ng new project
cd project
ng build --prod

作为结果，我得到了生成的 dist 文件夹和许多打包文件。其中最大的一个叫做 vendor.[hash].js，大小约为855kB。

然而，如果我执行的是ng serve --prod：

ng new project
cd project
ng serve --prod

我可以看到使用Chrome控制台加载的localhost:4200供应商包的大小约为300kB。

为什么会这样？有没有一种方法可以通过ng build而不是ng serve来实现第二个结果？

- WildDev

---

如果这是真的，那么这是一个很好的问题（我将尝试解决它）。ng serve是否可能在内存中保存某些内容或者没有完全捆绑所有资产，例如，-prod的webpack输出将不同于制作完全可部署的分发集？我感兴趣的是，当我使用纯ES6和webpack，并进行构建时，我 tend to get MUCH less complicated distribution bundles that load faster。我已经对CLI分发输出有所怀疑（可能是由于缺乏通过cli配置而不是webpack精确配置的知识）， - Tim Consolazio

我尝试了一下，似乎某些资源可能被缓存了。 - Tim Consolazio

@TimConsolazio，如果按照Angular文档中所描述的明确使用webpack，则输出结果将非常类似于“ng build --prod”。只是注意到“cmd”输出有些不同，“ng serve”的输出看起来比其他输出要大一些。 - WildDev

你确定你没有在控制台中查看gzipped大小，而是生成文件的非gzipped大小吗？ - JB Nizet

@JBNizet，确实如此，现在清楚发生了什么。谢谢:) - WildDev

Answer 1

经评论发现，您只是比较了两个不同的值：文件系统中未经过gz压缩的文件大小和浏览器控制台中下载后经过gz压缩的文件大小。

- JB Nizet

Answer 2

关键在于何时使用构建或服务，而不是哪个更好。

1. 构建用于部署目的，服务用于开发目的。
2. 构建会生成编译后的输出到 /dist 目录，服务则将构建成果从内存中提取以加快开发体验。

参考文献: 构建 vs. 服务

- Vaibhav

Answer 3

我在我的环境中测试了这个：

ng build --prod = main.[hash].js = 792KB。

bg serve --prod = main.[hash].js = 863KB。

$ ng --version
angular-cli: 1.0.0-beta.19-3
node: 7.0.0
os: win32 x64

ng serve 会生成一个稍小的缓存文件，因为它是临时的。

更新你的 ng cli 并再次测试。

- Jonathan Borges

---

已更新所有工具。Npm 是 4.0.5，node 是 7.3.0，angular-cli 是 1.0.0-beta.24。但是一切仍然没有改变。当应用程序增长时，重量差异似乎变得非常巨大，只是将 Material 2 安装到基本项目中。现在重量差异超过了 1MB，280kB 对比 1300kB。 - WildDev

尽管它是暂时的，但一切都像正常运行一样。真奇怪。 - WildDev