如何检查 Angular 模块延迟加载是不是适用于 Chrome？

Posted 2023-03-07

【中文标题】如何检查 Angular 模块延迟加载是不是适用于 Chrome？

【英文标题】：How to check if Angular Module Lazy Loading works on Chrome?如何检查 Angular 模块延迟加载是否适用于 Chrome？

【发布时间】：2019-06-27 22:16:48

【问题描述】：

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

【问题讨论】：

***.com/questions/42459326/…

【参考方案1】：

根据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，但至少代码是最少的。谢谢。

【参考方案2】：

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

第 1 步 - 按 F12 或 Ctrl + Shift + i

打开开发者工具

第 2 步 - 点击网络标签。

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

【讨论】：

非常感谢。我实际上还没有检查过angular.io/guide/lazy-loading-ngmodules#confirm-its-working 因为我刚刚发现我只是通过跟踪/复制其他项目/样板中的现有实现来实现这种延迟加载。

【参考方案3】：

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

安装并运行 Angular 应用程序后，您可以转到 开发人员工具，然后单击 Augury 选项卡，它将显示组件 树一开始是这样的：

然后你点击

Router Tree

标签，这很有趣 显示动态加载哪个模块/组件的部分

延迟加载

如下：

Augury 还帮助 Angular 开发人员通过 组件树和可视化调试工具。开发人员立即获得 洞察他们的应用程序结构，变化检测和 性能特点。

【参考方案4】：

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

在 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 模块后，如果再次搜索，应该会显示出来。