Angular 父子模块 block 大小问题

Question

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

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

1. ExternalSourceSharedModule进口SharedModule因为共享模块有应用层依赖

2. 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所以我必须导入 ExternalSourceSharedModule在 SourceModule和 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返回这个:

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 的 child
• 3.chunk.js 是 SourceModule这是 ExternalSourceModule 的 child

当我删除 ExternalSourceSharedModule 时，您可以看到这些 block 的大小现在 > 1 MB来自 EntityModule和 SourceModule然后做 ng build返回:

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]

现在，如果您看到 block 的大小减少到 < 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

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

更新 1:

我现在讲的是基于@angular/cli@1.2.0的。否则，我们可能无法到达岸边。