Angular 延迟加载重复模块

Question

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

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

FirstPageWithTitleModule

SecondPageWithTileModule

ThirdPageWithTitleModule

随机模块

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

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

Answer 1

这是此示例的工作项目:stackblitz .
我正在回答这两个问题:
1.多少次TitleModule (title.module.ts) 会出现在捆绑包中吗？
答: 1 .
由于TitleModule被导入多个 dependency graph年代，
(每个 LazyLoaded 模块一个。例如:loadChildren: () => import('app/first-page-with-title-module.module').then(m =>m.FirstPageWithTitleModule) )
Webpack 足够聪明，可以检测到这些多个引用，他将为共享模块(文件)创建一个单独的 block 。 (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

每一个创造 TitleModule当他试图破译 import其 NgModule 的数组装饰师。 TitleModule parentInjector 中不存在对象和惰性模块不共享模块，InjectionTokens(providers)，除非它们在共享的祖先注入(inject)器中。
在演示 : 你可以在 console.log 中看到
TitleModule 被实例化 3 次(每次输入路由时它都会实例化 - 除非它已经在此路由中创建) - 最大数量为 3。