main.bundle.js 大小在 Angular 4 中负载过大答案

【问题标题】：main.bundle.js size taking much too load in Angular 4main.bundle.js 大小在 Angular 4 中负载过大
【发布时间】：2018-07-30 19:10:30
【问题描述】：

我使用的是 Angular 5.2.2 版本，当一个新用户第一次点击我的实时应用程序时，需要花费太多时间；这个 main.bundle.js 大小的原因是太大了，因此比平时需要更多的时间。

我在少数组件上应用了“ng build --prod”以及一些延迟加载，但它不起作用。以及我还删除了应用程序中的冗余组件、资产等，但它也不起作用。

任何人都可以建议我做什么提前致谢亚西尔

【问题讨论】：

我来自 react 并在我的应用程序中使用代码分割的概念。检查此链接以获取更多信息和谷歌搜索词：medium.com/@kirill_shevch/introduction-to-webpack-50303d687080
任何其他没有 webpacks 的解决方案？
其实我只想加载单页先登录

【解决方案1】：

我遇到了同样的问题，因为我没有使用延迟加载。延迟加载是一种将应用程序分离到不同模块中的技术，这些模块仅在应用程序需要时才需要。 Lazy loading Angular's official documentation。

在我的例子中，我为每个父 url 路由创建了一个模块（例如 /car -> 创建一个模块，/car/:id -> 将它包含在你的汽车模块中）。使用这种策略，我现在的加载时间约为 3 秒。但以前是 12 秒左右。

【讨论】：

【解决方案2】：

首先，您确定缓慢是由 main.bundle.js 文件引起的吗？它的大小是多少？

正如所指出的，延迟加载的模块通常会有所帮助

独立于 Angular，确保在您的网络服务器（nginx 或 nodejs 或任何您使用的）上启用压缩

对于nodejs

对于 nginx

【讨论】：

【解决方案3】：

您可以尝试 Ahead of Time Compilation，这将使您的包大小更小。

ng build --prod --aot

这将从包中删除编译器代码，并且如果模板中未使用任何未使用的功能（如 ngSwitch 或 ngIf），也会删除。

【讨论】：