角度延迟加载重复模块

Question

我正在尝试将延迟加载集成到我的 Angular 应用程序中。

我有 4 个模块。每个模块都是延迟加载的。

• FirstPageWithTitleModule
• SecondPageWithTileModule
• ThirdPageWithTitleModule
• 随机模块

前 3 个模块正在导入我的自定义 TitleModule。

我的问题：如果所有路由都是lazyLoaded，TitleModule 会发生什么？它会生成 3 次并将其大小添加到lazyLoadedModule 中吗？还是仅生成 1 次，文件大小相同，并在所有三个模块中使用？

Answer 1

这是这个例子的一个工作项目：stackblitz。

我正在回答这两个问题：

1. TitleModule(title.module.ts) 会在包中出现多少次？

答案：1。

由于TitleModule被导入多个dependency graphs，

（每个 LazyLoaded 模块一个。例如：loadChildren: () => import('app/first-page-with-title-module.module').then(m =>m.FirstPageWithTitleModule) ）

Webpack 足够聪明，可以检测到这些多个引用，并且他会为共享模块（文件）创建一个单独的块。 （Angular 作为 webpack 中的插件运行）

这是与此场景相关的small example from webpack documentation。

在演示中：您可以在控制台中看到 title-module.ts 被 webpack 解析 1 次。由于 webpack 只将模块（文件）推送到包中一次，因此它只需要读取一次，然后将其放在缓存中。

2。 TitleModule 将被实例化多少次？

答案：3

每个loadChildren 回调最终都会以here in angular source code 结束并执行factory.create(parentInjector)，这意味着会创建一个新的NgModule 作为父路由的子路由。

所以现在我们有了 3 个新的延迟加载模块：

• FirstPageWithTitleModule
• SecondPageWithTileModule
• ThirdPageWithTileModule

每个人在尝试破译其NgModule 装饰器的import 数组时都会创建TitleModule 对象。 TitleModule 对象在 parentInjector 中不存在，并且惰性模块不共享 Modules、InjectionTokens(providers)，除非它们位于共享的祖先注入器中。

在演示中：您可以在 console.log 中看到 TitleModule 被实例化 3 次（每次你输入一个路由它都会实例化 - 除非它已经在这个路由中创建） - 最多 3 个。