如果一个模块被多个模块引用，有多少个模块实例最终会出现在最终的包中？

Question

我想知道

之间的最佳策略是什么

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

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

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

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

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

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

CardModule 会被加载 第二次 还是 Angular 只是重用 CardModule 与 GallelryModule?

一起加载

编辑

好像还有人问过同样的问题。但是，似乎没有人明确回答这个问题。

感谢您的帮助。

Answer 1

不，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

以下是有关加载工作原理的一些信息 -

Initial Chunk Files 包含最终的包，main.js 是放置所有热切模块（应用程序模块、共享模块等）的地方。
Lazy Chunk Files 包含 Angular 保留的惰性模块列表，CardModule 放在 common.js.
如果您访问 profile page，则会加载 profile-profile-module.js 和 common.js。当您稍后访问 gallery page 时，只会加载 gallery-gallery-module.js。您可以在访问惰性路由时在浏览器的“网络”选项卡上查看此项。
如果你有其他模块被多个惰性模块使用，那些也将被放在 common.js.
如果您的模块仅由一个惰性模块使用，那么这些模块将与该惰性模块捆绑在一起，而不是将它们放在 common.js 中。例如，如果您有一个仅供 GalleryModule 使用的 XyzModule 模块，那么它将与 GalleryModule 捆绑在一起并放入 gallery-gallery-module.js.

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

如果一个模块被多个模块引用，有多少个模块实例最终会出现在最终的包中？

How many instances of a module end up in the final bundle if it's referenced by several modules?

angular

angular-module

angular-lazyloading

编辑