angular - Angular 7 是否有库来检查延迟加载性能树

Question

我在我的 Angular 7 项目中使用延迟加载，当我运行以下命令时：

npm build --prod --aot

我得到以下信息：

chunk {0} common.0913107449ce910bce3f.js (common) 8.58 kB  [rendered]
chunk {1} 1.c6d0e41cf66977823213.js () 14 kB  [rendered]
chunk {2} 2.e89188e71cd964268db5.js () 407 kB  [rendered]
chunk {3} 3.33139e095dcdc99938cc.js () 62.4 kB  [rendered]
chunk {4} 4.ebda0bbcf86bc49de010.js () 408 kB  [rendered]
chunk {5} 5.2aad2eeebadc8b4b5cd2.js () 479 kB  [rendered]
chunk {6} 6.03f5238fe37cf4a30218.js () 18.3 kB  [rendered]
chunk {7} runtime.f6427d1efd0aebd99cd7.js (runtime) 2.56 kB [entry] [rendered]
chunk {8} 8.c81220186a7896b40e98.js () 201 kB  [rendered]
chunk {9} 9.cf6ecff537fab1ea2da1.js () 120 kB  [rendered]
chunk {10} main.5d49d1e040bce48af816.js (main) 950 kB [initial] [rendered]
chunk {11} polyfills.4e6addda4bdac3fbf7e1.js (polyfills) 58.2 kB [initial] [rendered]
chunk {12} styles.0ace7b519537cad1d56a.css (styles) 218 kB [initial] [rendered]
chunk {13} 13.3b05a7908f130641937a.js () 163 kB  [rendered]
chunk {14} 14.cb38771e3a2dc30be680.js () 7.57 kB  [rendered]
chunk {15} 15.b85622d4429edf650325.js () 4.47 kB  [rendered]
chunk {16} 16.c9f6d17f9cb455e6782a.js () 3.64 kB  [rendered]
chunk {17} 17.7c0893ad5dc1b053e206.js () 3.94 kB  [rendered]
chunk {18} 18.2656773c2af908bb7c14.js () 227 kB  [rendered]
chunk {19} 19.d29460e5effdc355660c.js () 215 kB  [rendered]

众所周知，延迟加载的概念。但是这些块大小是正常的吗？或者我应该做些什么来改变使用库的结构？

请注意，构建的 dist 文件夹大约是 13mb。

标签： angularangular7

Answer 1

我认为定义什么块大小可以接受或不可以接受的准则并不是那么简单，因为它在很大程度上取决于应用程序的大小和所需的结构。

我认为您提供的块的大小是可以接受的，特别是当您考虑将这些块交付到客户端 gzip 压缩会大大减少生成文件的大小时。

我正在处理的一个应用程序的构建生成了以下块

请注意主块大小总计为 1.74MB... 其背后的原因是这个特定的应用程序在后台基于许多第三方库，这些库包含在全局范围内（通过angular.json脚本部分）。这意味着这些库按原样添加到主包中。

如果您想尝试减小块的大小，请尝试以下操作

• 识别添加到全局范围的任何不需要的库
• 确保未添加到全局范围内的任何第三方库都是三个可摇动的（提供使用provideIn: root符号的角度服务的示例库）
• 确保在该模块中定义了单个延迟加载模块所需的服务、组件、指令等。

在内部，webpack（Angular Cli 使用它来捆绑您的应用程序）构建依赖关系图并按照一些启发式方法拆分块。本文解释了如何通过 webpack 配置块拆分的不同方式。