Angular 角度距离文件太大，导致下载速度慢

自从我将Angular应用升级到5版，然后升级到6版后，它在浏览器中的下载速度非常慢，有时需要30秒或40秒以上。虽然我正在为生产优化构建，（

ngbuild--prod--buildoptimizer--aot

），但核心文件总计超过了1兆字节

主要罪犯是

• main.1acde84f0c61a49d6387.js

  ，即831kb

• style.99d75733e80daf42e5f9.css

  ，大小为269kb，以及

• 0.06cf948c35f50dabe8dc.js

  ，大小为243kb

---

这些文件通常都这么大吗？你知道我该如何精简它们并提高下载速度吗？

原因是你将所有应用程序捆绑在一个模块中

它意味着所有的页面、组件，。。。如果把它捆成一个文件，它肯定会很重

这里的解决方案是，您应该将应用程序分离到更小的捆绑包中。在

Angular

中，它被称为

模块延迟加载

，并实现

预加载

（可选）以在第一次加载时减小

捆绑大小

您可以阅读以下文章：

或者按照以下步骤操作：

• 为您的页面创建一个模块，它还包括必要的组件
• 此模块的路由
• 使用

  loadChildren

  在

  app router

  加载此模块。诸如此类：

  {path:'a'，loadChildren:'./anynomous/anynomous.module#AnynomousModule'}，

---

这很可能是由与您的应用程序捆绑在一起的第三方库造成的。如果可以，请使用“ng eject”并获取网页包配置。添加webpack bundle analyzer插件（）以找出是哪个第三方导致了较大的捆绑包大小。然后将其设置为外部脚本引用（最好是CDN），而不是捆绑包的一部分。以下是输出的屏幕截图：。我无法识别任何不应该存在的东西……我看到一些第三方库，您可以将它们分离出来（lodash.js、url.js）。您使用的是@angular/cli还是webpack？据我所见，如果你能将你的供应商捆绑包从你的应用捆绑包中分离出来，你应该能够将你的捆绑包大小降低到100Kb（main.js）。延迟加载模块也会有帮助。谢谢你的提示。我在

package.json

中列出了angular cli，我是从命令行构建的。这是否意味着我正在使用angular cli？我不知道这是非此即彼。我希望将供应商捆绑包与应用程序捆绑包分开，尽管我不确定如何分开。这就是ng eject的作用吗？打得好。我确实把所有的东西都集中到了一个模块中。我遵循了您链接到的教程，并为延迟加载创建了新的模块和新的子路由。我现在在dist文件夹中看到4个附加文件，例如

1.b06a3b4d3470560595fb.js

。然而，下载时间并没有提高，因为我的

main.a346bfb6bc1d7f56862f.js

仍然超过800kb。（它实际上变大了一点。）作为实验，我试着在

app.routing.ts

中注释每个路由，并尽可能减少

app.module.ts

，但主.js文件仍有大约800kb。我肯定还遗漏了一些东西……我不确定你的应用程序场景，但你应该将应用程序的所有页面、组件分离到相应的模块中。示例：您的第一个页面是登录页面，因此您只需为

login

加载模块即可。它需要几kb。而

1.b06a3b4d3470560595fb.js

它被称为chunk，在正常的应用程序中，我们有大约60个chunk，而在大型应用程序中，我们的chunk比它多。应该模块化我们的应用程序。