如何检查Angular Module延迟加载是否可在Chrome上运行？

Question

如何检查是否使用Chrome开发者工具为打开的模块延迟加载了js文件？

Answer 1

根据Angular's Lazy Loading guide：

  

您可以检查Chrome开发人员工具是否确实在延迟加载模块。在Chrome中，通过在Mac上按Cmd + Option + i或在PC上按Ctrl + Alt + i来打开开发工具，然后转到“网络”标签。

一旦执行了延迟加载模块的操作，您应该能够在“网络”选项卡中看到加载的块。像这样：

注意：：另一项重要检查是确保不再重新加载延迟加载的模块。要确认，请移动到其他路径，然后再次单击“操作”，这一次它不会进行网络调用来加载该块，因为它已经被加载。

Answer 2

确保延迟加载正在工作。在chrome中，

步骤1 -通过按 F12 或 Ctrl + Shift + i

打开开发人员工具

第2步-点击网络标签。

导航到惰性URL时，应该看到呈现的 0.chunk.js 文件。

Answer 3

除其他正确答案外，您可以使用Augury工具确定延迟加载的模块和组件，Angular Augury是用于调试Angular应用程序的Chrome和Firefox Dev Tools扩展。

• 安装并运行angular应用后，您可以转到 开发人员工具，然后单击“ Augury”选项卡，它将向您显示组件 首先是这样的树：

• 然后单击路由器树标签，这很有趣 向您显示动态加载哪个模块/组件的部分 并延迟加载，如下所示：

  

Augury还可以帮助Angular开发人员通过以下方式可视化应用程序   组件树和可视化调试工具。开发人员立即获得   洞察其应用程序结构，更改检测和   性能特征。

Answer 4

有很多方法可以检查出来。

1. ng服务后，模块块（已应用延迟加载）将显示在终端中。

2. 路由器树下的角预言，它将显示（[lazy]）表示已延迟加载 模块。但是请确保没有不必要地将模块导入app.module.ts或导入独立模块，因为它将加载那些文件（读取点3）

3. 在Web开发人员工具中，查找文件/组件（对其应用了延迟加载）。如果文件甚至在加载模块之前就已经存在，那么延迟加载将无法进行（加载模块之前，组件应该是不可见的）。加载该模块后，将显示相同的文件。

假设项目包含一个模块-> abc.module.ts abc.module.ts包含两个组件abc1.component.ts和abc2.component.ts 如果延迟加载正在工作，则 在Web开发人员工具中搜索文件时（在加载abc模块之前），搜索结果中不应显示abc1和abc2。加载abc模块后，如果再次搜索，则会显示出来。