【发布时间】：2019-06-27 22:16:48
【问题描述】：
如何检查使用 Chrome 开发工具打开的模块的 js 文件是否延迟加载？
【问题讨论】：
标签： javascript angular google-chrome debugging google-chrome-devtools
【发布时间】：2019-06-27 22:16:48
【问题描述】：
根据Angular's Lazy Loading guide：
您可以使用 Chrome 开发人员工具检查模块是否确实在延迟加载。在 Chrome 中，在 Mac 上按 Cmd+Option+i 或在 PC 上按 Ctrl+Alt+i 打开开发工具，然后转到“网络”选项卡。
一旦您执行了延迟加载模块的操作，您应该能够在 Network 选项卡中看到一个 Chunk 正在加载。像这样的：
注意：另一个重要的检查是确保延迟加载的模块不会再次加载。为了确认，移动到不同的路径，然后再次点击 Action，这一次它不会进行网络调用来加载块，因为它已经被加载了。
【讨论】：
-
哇！谢谢你。这是否意味着如果我有两个延迟加载的模块导入一个，比如说，MatButtomModule，Angular 会自动处理它而不重新加载它，即使我以编程方式将它添加到两个延迟加载的模块上？
-
这取决于。理想情况下，可以创建一个
AppMaterialModule，在其中导出应用程序将使用的所有模块。然后将这个AppMaterialModule导入SharedModule。然后这个SharedModule将被导入到 LazyLoadedModules 中。现在，由于 SharedModule 会更早加载（可能是因为某些模块急切地加载了它），Angular 不会再次加载它，因为它已经不需要它了。 -
没错。这个用例可以更好地避免重复导入。虽然从技术上讲，我们仍然会在所有延迟加载的模块中重复导入
SharedModule，但至少代码是最少的。谢谢。
【讨论】：
-
非常感谢。我实际上还没有检查过angular.io/guide/lazy-loading-ngmodules#confirm-its-working 因为我刚刚发现我只是通过跟踪/复制其他项目/样板中的现有实现来实现这种延迟加载。
除了其他正确的答案外，您可以使用 Augury 工具来确定延迟加载的模块和组件，Angular Augury 是用于调试 Angular 应用程序的 Chrome 和 Firefox 开发工具扩展。
- 安装并运行 Angular 应用程序后，您可以转到 开发人员工具，然后单击 Augury 选项卡，它将显示组件 树一开始是这样的：
- 然后你点击Router Tree标签，这很有趣 显示动态加载哪个模块/组件的部分 延迟加载如下：
Augury 还帮助 Angular 开发人员通过 组件树和可视化调试工具。开发人员立即获得 洞察他们的应用程序结构，变化检测和 性能特点。
【讨论】：
有很多方法可以检查出来。
在 ng serve 之后，模块块（应用了延迟加载）将显示在终端中。 image showing chunk of file
Router Tree 下的 Angular 占卜，它会为延迟加载显示 ([lazy]) 模块。但请确保您没有在 app.module.ts 中导入这些模块或不必要地导入独立模块，因为它会加载这些文件（阅读点 3）
在 Web 开发人员工具中查找文件/组件（对其应用延迟加载）。如果文件甚至在加载模块之前就存在，则延迟加载不起作用（在加载模块之前组件不应该是可见的）。加载该模块后将显示相同的文件。
假设项目包含一个模块 -> abc.module.ts abc.module.ts 包含两个组件 abc1.component.ts 和 abc2.component.ts 如果延迟加载有效，那么 abc1 和 abc2 不应显示在 Web 开发人员工具中搜索文件的搜索结果中（在加载 abc 模块之前）。加载完 abc 模块后，如果再次搜索，应该会显示出来。
【讨论】：