0

我想知道之间最好的策略是什么

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

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

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

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

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

假设用户访问图库页面。galleryModule将与其依赖项一起加载，即CardModule。比方说，在那之后，用户决定去个人资料页面，这将导致ProfileModule被加载。

CardModule会被第二次加载，还是 Angular 会重用与GallelryModule一起加载的CardModule？

编辑

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

感谢您的帮助。

4

1 回答 1

1

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

请注意，惰性模块不会放在最终的 bundle中，它们仅在访问相应的惰性路由时才会加载。

在开发时，以下是运行应用程序后您将看到的内容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以更好地了解哪些模块与哪些模块捆绑在一起。

于 2021-03-21T21:02:08.570 回答