角延迟加载重复模块 [英] Angular lazy loading duplicate modules

问题描述

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

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

• FirstPageWithTitleModule
• SecondPageWithTileModule
• ThirdPageWithTitleModule
• RandomModule

前3个模块将导入我的自定义TitleModule.

我的问题:如果所有路由都被lazyLoaded处理，那么TitleModule会怎样?它会生成3次并将其大小添加到lazyLoadedModule吗?还是仅用一个文件大小将其生成一次，并在所有三个模块中使用?

解决方案

这是此示例的有效项目:依赖关系图中， >

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

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

这是Webpack文档中的小示例与这种情况相关.

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

2.实例化TitleModule多少次?

答案: 3

每个loadChildren回调最终以在此处输入有角源代码并执行factory.create(parentInjector)，这意味着将创建一个新的NgModule作为父路由的子代.

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

• FirstPageWithTitleModule
• SecondPageWithTileModule
• ThirdPageWithTileModule

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

在演示中:您可以在console.log中看到 TitleModule实例化3次(每次输入路由时都会实例化-除非它已在此路由中创建)-最多3个.

I am trying to integrate lazy loading into my Angular application.

I have 4 modules. Each module is lazy loaded.

• FirstPageWithTitleModule
• SecondPageWithTileModule
• ThirdPageWithTitleModule
• RandomModule

The first 3 modules are importing my custom TitleModule.

My question: what happens with the TitleModule if all routes are lazyLoaded? Will it be generated 3 times and add its size to the lazyLoadedModule? Or will it be generated only 1 time with a single file size and used across all three modules?

解决方案

Here's a working project of this example: stackblitz.

I'm answering those two questions:

1. How many times TitleModule(title.module.ts) will appear in the bundles?

Answer: 1.

Since TitleModule is imported in multiple dependency graphs,

(one for each LazyLoaded module. e.g: loadChildren: () => import('app/first-page-with-title-module.module').then(m =>m.FirstPageWithTitleModule) )

Webpack is smart enough to detect those multiple references and he'll create a separate chunk for the shared modules(files). (Angular runs as a plugin inside webpack)

Here is a small example from webpack documentation that correlates with this scenario.

In the demo: You can see in the console that title-module.ts is parsed by webpack 1 time. Since webpack pushed the module(file) only once to the bundle, it only needs to read it once, and then its on its cache.

2. How many times TitleModule will be instantiate?

Answer: 3

Each loadChildren callback eventually ends up here in angular source code and executes factory.create(parentInjector) which means a new NgModule is created as a child of the parent route.

So now we have 3 new lazy loaded modules:

• FirstPageWithTitleModule
• SecondPageWithTileModule
• ThirdPageWithTileModule

Each one creates TitleModule object when he tries to decipher the import array of its NgModule decorator. TitleModule object doesn't exists in the parentInjector and lazy modules do not share Modules, InjectionTokens(providers) unless they are in a shared ancestor injector.

In the demo: You can see in the console.log that TitleModule is instantiate 3 times(each time you enter a route it'll instantiate - unless it was already created in this route) - max number of 3.

这篇关于角延迟加载重复模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！