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

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

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

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

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

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

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

内部webpack（Angular Cli用于捆绑您的应用程序）构建依赖关系图，并根据一些启发式方法拆分块。 article解释了如何通过webpack配置块拆分的不同方式。

Answer 2

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

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

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

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