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

如何解决如果一个模块被多个模块引用，那么最终包中有多少个模块实例？

我想知道两者之间的最佳策略是什么

• 一个包含所有可重用代码的共享模块
• 需要时引用的单个可重用代码

我认为反对将所有可重用代码放在共享模块中的原因是它会很大并且会减慢应用程序的加载速度，因为并非每个模块都需要共享模块中的所有代码。

galleryModule 和 ProfileModule 都导入 CardModule。它们也都是延迟加载的。

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

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

假设用户访问了图库页面。 galleryModule 将与其依赖项一起加载，即 CardModule。假设在此之后，用户决定转到个人资料页面，这将导致加载 ProfileModule。

CardModule 会第二次加载，还是 Angular 会重复使用与 gallelryModule 一起加载的 CardModule /strong>？

编辑

似乎有人问了同样的问题here。然而，似乎没有人明确回答这个问题。

感谢您的帮助。

解决方法

不，不会第二次加载 CardModule。 Angular 有其内部机制来检测模块是否已经加载。如果是这样，它不会再次加载模块，而是使用已经加载的实例。

注意懒惰模块放在最终包中，只有在访问相应的懒惰路由时才会加载它们。 >

在开发时，使用 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 是放置所有热切模块（应用模块、共享模块等）的位置。

2. Lazy Chunk Files 包含 Angular 保留的惰性模块列表，CardModule 放在 common.js 中。

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

4. 如果您有其他模块被多个惰性模块使用，那么这些模块也会被放入 common.js。

5. 如果您的模块仅由一个惰性模块使用，那么这些模块将与该惰性模块捆绑在一起，而不是将它们放在 common.js 中。例如，如果您有一个仅由 XyzModule 使用的 GalleryModule 模块，那么它将与 GalleryModule 捆绑在一起并放入 gallery-gallery-module.js。

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