Angular 父子模块块大小问题

Question

我有这样的应用程序结构：

1. app
   1. Shared Module
   2. Modules
      1. ExternalSourceModule
         Child Modules
            1. SourceModule
            2. EntityModule
         ExternalSourceSharedModule

ExternalSourceSharedModule 导入 SharedModule 因为共享模块具有应用程序级依赖性
ExternalSourceModule 并且它的子模块导入 ExternalSourceSharedModule 因为 ExternalSourceSharedModule 有一些依赖项 ExternalSourceModule 它是 Child Modules Needs

ExternalSourceSharedModule代码：

@NgModule({
   ...
   imports: [
     ShareModule,
   ]
   ...
});

ExternalSourceModule 的代码导入 ExternalSourceSharedModule

@NgModule({
   ...
   imports: [
    ExternalSourceSharedModule,
    RouterModule.forChild(externalSourceRoutes)
  ],
   ...
});

现在 ExternalSourceModule 延迟加载它的子模块：

export const externalSourceRoutes: Routes = [
   { path: 'source', loadChildren: './modules/source/source.module#SourceModule' },
   { path: 'entity', loadChildren: './modules/entity/entity.module#EntityModule' }
]

ExternalSourceSharedModule 依赖于 ExternalSourceModule 以及 SourceModule 和 EntityModule 所以我必须在 SourceModule 中导入 ExternalSourceSharedModule和 EntityModule 以及代码：

EntityModule:

@NgModule({
  ...
  imports: [
    ExternalSourceSharedModule
    RouterModule.forChild(entityRoutes)
  ],
  ...
});

export class EntityModule {}

SourceModule:

@NgModule({
  ...
  imports: [
    ExternalSourceSharedModule
    RouterModule.forChild(entityRoutes)
  ],
  ...
});

export class SourceModule {}

我正在为我的项目使用 @angular/cli，做 ng build returns 这个：

Time: 9020ms
chunk    {0} 0.chunk.js, 0.chunk.js.map 1.17 MB {1} {2} {3} {4} {5} {6} {9} [rendered]
chunk    {1} 1.chunk.js, 1.chunk.js.map 1.19 MB {0} {2} {3} {4} {5} {6} {9} [rendered]
chunk    {2} 2.chunk.js, 2.chunk.js.map 394 kB {0} {1} {3} {4} {5} {6} {9} [rendered]
chunk    {3} 3.chunk.js, 3.chunk.js.map 1.44 MB {0} {1} {2} {4} {5} {6} {9} [rendered]
chunk    {4} 4.chunk.js, 4.chunk.js.map 1.18 MB {0} {1} {2} {3} {5} {6} {9} [rendered]
chunk    {5} 5.chunk.js, 5.chunk.js.map 5.29 kB {0} {1} {2} {3} {4} {6} {9}
chunk    {6} 6.chunk.js, 6.chunk.js.map 11.8 kB {0} {1} {2} {3} {4} {5} {9}
chunk    {7} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {11} [initial]
chunk    {8} styles.bundle.js, styles.bundle.js.map (styles) 256 kB {11} [initial]
chunk    {9} main.bundle.js, main.bundle.js.map (main) 122 kB {10} [initial] [rendered]
chunk   {10} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.58 MB [initial] [rendered]
chunk   {11} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]

假设：

1.chunk.js 是 ExternalSourceModule
0.chunk.js 是 EntityModule，它是 ExternalSourceModule
3.chunk.js 是 SourceModule，它是 ExternalSourceModule

当我从 EntityModule 和 SourceModule 中删除 ExternalSourceSharedModule 然后执行 ng build [=109= 时，您可以看到这些块的大小现在大于 1 MB ]:

Time: 8779ms
chunk    {0} 0.chunk.js, 0.chunk.js.map 84.3 kB {1} {2} {3} {4} {5} {6} {9} [rendered]
chunk    {1} 1.chunk.js, 1.chunk.js.map 1.19 MB {0} {2} {3} {4} {5} {6} {9} [rendered]
chunk    {2} 2.chunk.js, 2.chunk.js.map 394 kB {0} {1} {3} {4} {5} {6} {9} [rendered]
chunk    {3} 3.chunk.js, 3.chunk.js.map 355 kB {0} {1} {2} {4} {5} {6} {9} [rendered]
chunk    {4} 4.chunk.js, 4.chunk.js.map 89.3 kB {0} {1} {2} {3} {5} {6} {9} [rendered]
chunk    {5} 5.chunk.js, 5.chunk.js.map 5.29 kB {0} {1} {2} {3} {4} {6} {9}
chunk    {6} 6.chunk.js, 6.chunk.js.map 11.8 kB {0} {1} {2} {3} {4} {5} {9}
chunk    {7} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {11} [initial]
chunk    {8} styles.bundle.js, styles.bundle.js.map (styles) 256 kB {11} [initial]
chunk    {9} main.bundle.js, main.bundle.js.map (main) 122 kB {10} [initial] [rendered]
chunk   {10} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.58 MB [initial] [rendered]
chunk   {11} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]

现在，如果您看到块的大小减少到 < 1 MB 以下，那么问题就变成了我可以告诉 ExternalSourceModule 使用 ExternalSourceSharedModule 作为其子模块的任何技术好吧，这样我就不需要在子模块中导入 ExternalSourceSharedModule。

目前从子模块中删除 ExternalSourceSharedModule 会破坏我的应用程序。

webpack-bundle-analyzer截图： https://box.everhelper.me/attachment/1011387/e86e6209-48b7-464d-912d-a5daa4f4cca4/227833-DmqHiBXBvJD2Puep/screen.png

环境： @angular: 4 @angular/cli: 1.0

希望我已经解决了我的问题。

Answer 1

由于您是延迟加载模块（Source 和 Entity 模块），因此您需要将 ExternalSourceSharedModule 导入每个模块。摘自官方docs

What if I import the same module twice?

That's not a problem. When three modules all import Module 'A', Angular evaluates Module 'A' once, the first time it encounters it, and doesn't do so again.

为了使您的构建更小，请尝试进行生产构建（如果您使用的是最新的 angular-cli，只需使用 --prod 即可启用 AOT。

ng build --prod

希望对您有所帮助。

Answer 2

我认为@brijmcq 遗漏了一些东西。

@touqeer-shafi，你应该使用 angular-cli 打开 aot 选项。从我的项目来看，我也有类似的结构，我没有那个问题。

运行这样的命令：

ng build -prod --aot

并查看构建统计信息。

ng build, ng build -prod and ng build -prod --aot produce different output bundles structure.

您还可以使用webpack-bundle-analyzer来分析哪些模块被捆绑到哪些块中。如果您对建议的命令仍有问题，请将屏幕截图粘贴到 webpack-bundle-analyzer 的每个包的报告中。然后我们可以获得更多信息以获得进一步的帮助。

更新 1：

我说的暂时以@angular/cli@1.2.0为准不然可能会到不了岸

Angular 父子模块块大小问题

Angular Parent and Child Modules Chunk sizes issue

lazy-loading

angular-routing

webpack

angular