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。

Answer 1

嘿有一个包可以在 npm 上找到

https://www.npmjs.com/package/source-map-explorer

构建时使用命令 ng build --prod --source-map=true

bundle.js 文件的源映射资源管理器路径它将在 DOM 中打开一个树状结构，显示应用程序每个部分的大小

Answer 2

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

我认为您提供的块的大小是可以接受的，尤其是当您认为将这些块交付给压缩后的客户端会大大减少生成文件的大小时。

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

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

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

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

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

Angular 7 是否有检查延迟加载性能树的库

Angular 7 is there libraries to check lazy loading performance tree

angular

angular7