如果一个模块被几个模块引用，那么在最后一个包中有多少个模块实例呢？

Question

我想知道最好的策略是

code

• individual
• 是一个共享模块，它包含在需要时引用的所有可重用的

可重用代码

我认为，将所有可重用代码放入共享模块的理由是，它将是巨大的，并且会减缓应用程序的加载，因为并不是每个模块都需要共享模块中的所有代码。

GalleryModule和ProfileModule都导入CardModule。他们都很懒，也很懒。

@NgModule({
    declarations: [...],
    imports: [
        ...,
        CardModule, 
        ...
    ]
})
export class GalleryModule { }

@NgModule({
    declarations: [...],
    imports: [
        ...,
        CardModule, 
        ...
    ]
})
export class ProfileModule { }

假设用户访问图库页面。galleryModule将与它的依赖项(即CardModule )一起加载。假设在此之后，用户决定转到配置文件页面，这将导致加载。

是为第二次GallelryModule加载CardModule，还是重新使用与一起加载的CardModule

编辑

似乎是其他人问了同样的问题，here。然而，似乎没有人清楚地回答了这个问题。

谢谢你的帮助。

Answer 1

不，CardModule将不会第二次加载。角有它的内部机制来检测一个模块是否已经加载。如果是这样的话，它不会再次加载模块，并使用已经加载的实例。

请注意，惰性模块是而不是放在最后的包中，只有在访问相应的延迟路由时才加载它们。

在开发时，在使用CLI 11.x运行应用程序之后，您将看到以下内容-

√ Browser application bundle generation complete.

Initial Chunk Files       | Names                  |      Size
vendor.js                 | vendor                 |   7.52 MB
polyfills.js              | polyfills              | 484.59 kB
styles.css, styles.js     | styles                 | 419.34 kB
main.js                   | main                   |  79.30 kB
runtime.js                | runtime                |   9.08 kB

                          | Initial Total          |   8.49 MB

Lazy Chunk Files          | Names                  |      Size
gallery-gallery-module.js | gallery-gallery-module |   7.36 kB
profile-profile-module.js | profile-profile-module |   7.35 kB
common.js   

以下是一些关于装载工作的信息-

1. Initial Chunk Files由最后一个包组成，main.js是您所有热切的模块(应用程序模块、共享模块等)放置的地方。

common.js.

1. Lazy Chunk Files包含有角度保持的延迟模块列表，并将CardModule放入Lazy Chunk Files中。

1. 如果您访问profile page，则加载profile-profile-module.js和common.js。稍后访问gallery page时，只加载gallery-gallery-module.js。当您访问惰性路由时，可以在浏览器的“网络”选项卡上检查此选项卡。

如果您有多个延迟模块使用的其他模块，那么这些模块也将放在common.js.中。

如果您的模块仅由单个延迟模块使用，则

1. 将与该延迟模块捆绑在一起，而不是将它们放入common.js中。例如，如果您有一个仅由gallery-gallery-module.js.

使用的XyzModule模块，那么它将与GalleryModule绑定并放入GalleryModule中。

编辑：

您可以使用ng build命令并检查上面dist目录中列出的生成的物理文件，以便更好地了解哪些模块与哪个模块捆绑在一起。