是否可以创建几 mb 以下的 Angular2/4 包？答案

【问题标题】：Is it possible to create Angular2/4 bundles under several mb in size?是否可以创建几 mb 以下的 Angular2/4 包？
【发布时间】：2017-07-19 01:28:23
【问题描述】：

目前，我正在为我公司将我们的一个 Web 应用程序迁移到 Angular4 的战略（每天有成千上万的用户）做初步的基础工作。我注意到官方的 Angular 文档在许多方面似乎有些欠缺。我特别想知道的一个领域是，人们如何创建 Angular2/4 构建工具链？更广泛的 Web 开发社区是否认为 Angular4 已经足够成熟，可以在其上构建严肃的企业级 Web 应用程序？我开始怀疑了。

我已经使用 systemJS、Rollup、webpack 和 webpack 作为 angular-cli 的一部分创建了 PoC 应用程序，即使使用“Hello World”级别的示例，我似乎也无法创建小于 2+mb 的包大小，我认为它完全不适合任何严肃的面向公众的应用程序。即使是使用 Webpack 进行“AOT”编译，以及“摇树”似乎也无法创建可接受大小的构建工件。环顾开源社区，我找不到解决这个问题的项目。我发现的大多数项目仍在使用 angular-cli 样板文件，并且所谓的 prod-ready 应用程序（例如“ng2-admin”）使用自己的预定义工具链完全缩小了大约 6mb。

我已经成功地将基于 angular-cli 的工具链与我们的 CI 管道集成，并且可以将“缩小”（原文如此）应用程序部署到服务器，但是构建时间很糟糕，即使遵循所有这些，最终文件大小也是不可接受的官方文档和我可以在在线文章中找到的最佳建议。

tl;dr：Angular2/4 能否用于创建大小低于几兆字节的 Web 应用程序，如果可以，是否可以在不耦合到 angular-cli 或网络包？可以用来捆绑应用程序的最精简的工具链是什么？如果人们能指出已经克服这些问题的应用程序示例，或者创建构建管道的更好策略，我将不胜感激。

【问题讨论】：

这个问题似乎不适合 StackOverflow 格式（即太宽泛）。你应该试试 angular-cli。它有能力进行生产构建。毫无疑问，可以生成少于几 mbs 的应用程序。
对问题的广泛性表示歉意，但这仍然是一个问题。如果在 stackExchange 网络上有更好的地方可以问它，我很乐意在那里问它。另外，关于你的第二点，你能证明这一点吗？我刚刚定时重建“ng2-admin”，花了将近 4 分钟，包括在四核系统上安装软件包并生成了超过 6mb 大小的包……这似乎是 angular2/4 应用程序的典型。跨度>
我感受到你的痛苦。答案是不。如果你能够在角度和休息之间做出决定，那就休息吧。几乎我认识的每个人都使用角度，因为炒作仅此而已。从 angular 1 迁移或“认为”它是像 Java 这样的企业级。检查medium.com/@chriscordle/…
您可以尝试的一件事是通用应用程序，您可以在服务器中运行应用程序，这只是发送每个页面所需的数据，因此它更轻。也就是说，如果您不顾一切地坚持使用 angular 。
非常感谢@Skeptor 的回复。你对这个问题的想法似乎与我自己的想法相呼应。我在想，如果我需要开始在服务器上渲染应用程序，那我为什么还要使用 Angular 呢？我们已经从混合 ASP.net 解决方案迁移到理想情况下拥有静态前端和基于微服务的架构，并完全分离关注点。还有其他更好的框架，在该领域具有良好的业绩记录。

标签： angular webpack angular-cli webpack-dev-server webpack-2

【解决方案1】：

我可以肯定地回答你的部分问题：

Angular2/4 能否用于创建以下网络应用程序？几兆字节

显然，这取决于您到底在做什么，但就我而言，答案是肯定的。我开发了许多小型 Angular 应用程序（3-10 kLoc，2-5 个外部依赖项）。我使用 angular-cli 来管理我的应用程序以及构建应用程序，它们最终具有非常合理的生产规模 (IMO)。对于我较大的应用程序，生产构建时间需要 20-30 秒。最终（gzipped）文件大小约为 170kb。它不是最小的，但也不是不合理的大。我使用的是功率相对较低的笔记本电脑（四核，1.9Ghz）。

这些结果是开箱即用的。我还没有尝试过使用设置/工具链。

显然，我们现在正在冒险进入基于意见的答案领域，但我并没有用它来炒作。我很欣赏系统架构：我发现它很容易在其中工作，而且我发现它可以为我做很多事情，而且只需很少的努力。当然，我还没有深入研究任何其他现代 javascript 框架，所以我想我可能会同样喜欢其他框架，但我对 Angular 非常满意。

关于服务器端渲染，我会说我将来很有可能会研究它，但该主题与 Angular 无关。我使用 Angular 是因为我需要一个高度动态的前端体验，而这种体验很难通过由一些 javascript 补充的后端系统来重现。因此，Angular（或任何前端应用程序，真的）对我来说是必需品。然而，所有前端应用程序都有一个直接的缺点：登录页面的页面加载速度较慢，因为必须交付整个应用程序，应用程序必须初始化，然后您才能获取数据加载您的页面。这使得在最重要的时候开始更多地访问服务器，从而降低最终用户的整体体验。不过，这不是 Angular 的问题：当您开始构建前端应用程序时，这只是野兽的本性。

【讨论】：

【解决方案2】：

这是使用 @angular/cli 1.2.0 为生产生成和构建的裸工作应用程序的大小

所以，对您的问题的简短回答是：是的，您可以创建一个大小低于几 mb 的 Angular 4 捆绑包。除此之外，它只是一个自以为是的讨论。

【讨论】：

“裸机应用”是什么意思？我也可以从 polyfills 文件中提取所有内容。它会编译，但你会失去任何类型的跨浏览器支持。简单地把它删减到除了编译的基本必需品之外，这有点不诚实，对吧？目标不是创建学术示例，而是创建一个有效的网络应用程序。
这意味着由@angular/cli 生成的工作应用程序没有我添加/删除任何内容。这是一个工作应用程序，包含此时所需的所有 polyfill。我会将这 200 KB 视为使用 Angular 的“价格”。从那时起，您将添加您的代码和第三方，无论您使用哪个框架或是否使用纯 js，您都将添加它们。如果您接受该“价格”或采取其他方式，则由您决定。