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因此我必须在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
3.chunk.js是SourceModule，是ExternalSourceModule

你可以看到这些块的大小有＆gt;当我从ExternalSourceSharedModule和EntityModule移除SourceModule然后执行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]

现在，如果你看到块的大小减少到低于＆lt; 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和ng build -prod --aot生成不同的输出包结构。

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

更新1：

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

Answer 2

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

如果我导入两次相同的模块怎么办？

这不是问题。当三个模块全部导入模块'A'时，   Angular首次遇到模块'A'时会对其进行评估，   并且不会再这样做。

为了让你的构建更小，尝试进行生产构建（如果你使用的是最新的angular-cli，只使用--prod就可以启用AOT。

ExternalSourceSharedModule

希望这有帮助。

角度父子模块块大小问题

2 个答案: