Angular dist文件很大，导致下载缓慢

Question

自从将Angular应用升级到版本5，然后是版本6以来，它在浏览器中的下载速度一直非常缓慢，有时会花费30或40秒以上。尽管我正在优化生产版本（ng build --prod --build-optimizer --aot），但核心文件加起来超过一兆字节。

主要罪犯是

• main.1acde84f0c61a49d6387.js，即831kb，
• styles.99d75733e80daf42e5f9.css（即269kb）和
• 0.06cf948c35f50dabe8dc.js，即243kb。

这些文件通常很大吗？知道如何减少它们并提高下载速度吗？

Answer 1

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

这意味着您的所有页面，组件，...将捆绑在一个文件中，肯定很重。

这里的解决方案是您应该将您的应用程序分为多个较小的包。在Angular中，它称为module lazy load，并实现preloading（可选）以在首次加载时减少bundle size。

您可以阅读以下文章：

• https://coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular
• https://angular.io/guide/lazy-loading-ngmodules

或按照以下步骤操作：

• 为您的页面创建一个模块，其中还包括其必要的组件。
• 为此模块路由

• 使用loadChildren将模块加载到app router。像这样：

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