angular - Angular父级和子级模块块大小问题

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

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

ExternalSourceSharedModule导入SharedModule，因为共享模块具有应用程序级依赖项
ExternalSourceModule和it子模块导入ExternalSourceSharedModule是因为ExternalSourceSharedModule有一些依赖关系，而它是ExternalSourceModule
代码：

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

导入Child Modules Needs的ExternalSourceSharedModule代码

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

现在，lazy加载它的子模块：

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

ExternalSourceModule与ExternalSourceSharedModule以及ExternalSourceModule和ExternalSourceSharedModule都有依赖关系，因此我必须在ExternalSourceModule和SourceModule中导入EntityModule以及代码：
ExternalSourceSharedModule

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

export class EntityModule {}

SourceModule

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

export class SourceModule {}

我正在为我的项目使用EntityModule，doingEntityModule:返回：

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小于cc>
0.chunk.js是SourceModule:的子级
3.chunk.js是@angular/cli的子级
当我从ng build中移除ExternalSourceModule并执行EntityModule返回时，您可以看到这些大于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对它的子模块也使用SourceModule，这样我就不需要在子模块中导入ExternalSourceModule。
当前从子模块中删除ExternalSourceSharedModule会中断我的应用程序。
EntityModule截图：
https://box.everhelper.me/attachment/1011387/e86e6209-48b7-464d-912d-a5daa4f4cca4/227833-DmqHiBXBvJD2Puep/screen.png
环境：
@角：4
@角度/cli:1.0
希望我已经澄清了我的问题。

最佳答案

我认为@brijmcq遗漏了一些东西。
@toukeer shafi，您应该使用angular cli打开aot选项。从我的项目来看，我也有类似的结构，我没有这个问题。
运行如下命令：

ng build -prod --aot

并查看构建统计信息。
ng build、ng build -prod和ng build -prod --aot产生不同的输出束结构。
您还可以使用webpack-bundle-analyzer来分析哪些模块被捆绑到哪些块中。如果您对建议的命令仍然有问题，请将屏幕截图粘贴到Webpack Bundle Analyzer的每个包的报告中。然后我们可以得到更多的信息以获得进一步的帮助。
更新1：
我现在讲的是基于@angular/[email protected]。否则，我们可能无法到达岸边。