Angular父模块和子模块块大小问题

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,
   ]
   ...
});  

导入ExternalSourceSharedModule的ExternalSourceModule的代码

@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 和 EntityModule 中导入 ExternalSourceSharedModule 以及代码：

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 的孩子
• 3.chunk.js 是SourceModule，它是ExternalSourceModule 的孩子

当我从EntityModule 和SourceModule 中删除ExternalSourceSharedModule 然后执行ng build 返回时，您现在可以看到这些块的大小> 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]

现在，如果您看到块的大小减小到 ExternalSourceModule 的任何技术，它也使用ExternalSourceSharedModule 作为它的子模块，所以我不'不需要在子模块中导入ExternalSourceSharedModule。

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

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

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

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

Answer 1

我认为@brijmcq 缺少一些东西。

@touqeer-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/cli@1.2.0。否则，我们可能达不到岸边。

Answer 2

由于您延迟加载模块（源模块和实体模块），您需要将ExternalSourceSharedModule 导入每个模块。摘自官方docs

如果我两次导入同一个模块会怎样？

这不是问题。当三个模块都导入模块'A'时， Angular 在第一次遇到它时评估模块“A”一次， 并且不再这样做。

要使您的构建更小，请尝试进行生产构建（如果您使用的是最新的 angular-cli，则仅使用 --prod 已启用 AOT。

ng build --prod

希望这会有所帮助。