角父和子模块的块大小问题

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 {} 

我m使用@angular/cli为我的项目，做ng build r eturns这样的：

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有> 1 MB的大小，然后做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] 

现在，如果你看到大块的尺寸减小到低于< 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 @角/ CLI：1.0

希望我已经清除我的问题。

Answer 1

我觉得@brijmcq是失去了一些东西。

@ touqeer - 沙菲，你应该打开aot选项与角CLI。由于从我的项目，我也有类似的结构也和我没有这样的问题。

像这样运行命令：

ng build -prod --aot 

，看到了构建统计数据。

ng build,ng build -prod和ng build -prod --aot产生不同的输出束结构。

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

更新1：

我说话是基于@角/ CLI @ 1.2.0现在。否则，我们可能无法到达岸边。

Answer 2

由于您是懒加载您的模块（源和实体模块），您需要将ExternalSourceSharedModule导入到每个模块。从官方采取docs

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

这不是问题。当三个模块全部导入模块'A'时， 角度评估模块'A'，第一次遇到它时， 并且不再这样做。

为了让你的构建更小，尝试做一个生产版本（如果您使用的是最新的角CLI，只用--prod是启用AOT。

ng build --prod 

希望这有助于。