Angular 父子模块块大小问题 [英] Angular Parent and Child Modules Chunk sizes issue

问题描述

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

I have application structure like this:

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

1. ExternalSourceSharedModule 导入 SharedModule 因为共享模块具有应用程序级依赖

1. ExternalSourceSharedModule imports SharedModule because shared module has application level dependencies

ExternalSourceModule 和它的子模块导入 ExternalSourceSharedModule 因为 ExternalSourceSharedModule 有一些依赖 ExternalSourceModule 和它的子模块需求

ExternalSourceModule and it child modules imports ExternalSourceSharedModule because ExternalSourceSharedModule has some dependencies which ExternalSourceModule and it's Child Modules Needs

ExternalSourceSharedModule的代码:

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

导入ExternalSourceSharedModule

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

现在 ExternalSourceModule 延迟加载它的子模块:

Now ExternalSourceModule Lazy Loads it's child Module:

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

ExternalSourceSharedModule 具有 ExternalSourceModule 以及 SourceModule 和 EntityModule 的依赖项，所以我必须导入 ExternalSourceModuleSourceModule 和 EntityModule 中的 code>ExternalSourceSharedModule 以及代码:

ExternalSourceSharedModule has dependencies for ExternalSourceModule as well as SourceModule and EntityModule So i've to import that ExternalSourceSharedModule in SourceModule and EntityModule as well code:

EntityModule:

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

export class EntityModule {}

源模块:

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

export class SourceModule {}

我在我的项目中使用 @angular/cli，Doing ng build 返回:

I'm using @angular/cli for my project, Doing ng build returns this:

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
的子代

• 1.chunk.js is ExternalSourceModule
• 0.chunk.js is EntityModule which is a child of ExternalSourceModule
• 3.chunk.js is SourceModule which is a child of ExternalSourceModule

当我从 EntityModule 和 SourceModule 中删除 ExternalSourceSharedModule 然后执行 时，您现在可以看到这些块的大小 > 1 MB>ng build 返回:

You can see the size of these chunks which has > 1 MB now when i remove ExternalSourceSharedModule from EntityModule and SourceModule then doing ng build returns:

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 在子模块中.

Now if you see the sizes of chunks reduces to below < 1 MB so the questions becomes is there is any technique where i can tell to ExternalSourceModule that use ExternalSourceSharedModule for it's child modules as well, so that i don't need to import ExternalSourceSharedModule in child modules.

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

Currently removing ExternalSourceSharedModule from child modules breaks my application.

webpack-bundle-analyzer 截图:

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

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

Environment: @angular: 4 @angular/cli: 1.0

希望我已经澄清了我的问题.

Hope i have cleared my question.

推荐答案

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

I think @brijmcq is missing something.

@touqeer-shafi，你应该用angular-cli打开aot选项.从我的项目来看，我也有类似的结构，我没有那个问题.

@touqeer-shafi, you should turn on aot option with angular-cli. As from my project, I have similar structure too, and I don't have that problem.

像这样运行一个命令:

ng build -prod --aot

并查看构建统计信息.

ng build、ng build -prod 和 ng build -prod --aot 产生不同的输出包结构.

ng build, ng build -prod and ng build -prod --aot produce different output bundles structure.

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

You can also use webpack-bundle-analyzer to analyze which modules are bundled into which chunks. If you still have problem with the suggested command, please paste the screenshot in webpack-bundle-analyzer's report of each bundle. Then we could get more information for further help.

更新 1:

我说的暂时是基于@angular/cli@1.2.0.否则，我们可能无法到达岸边.

What I talk is based on @angular/cli@1.2.0 for now. Otherwise, we may not reach to the shore.

这篇关于Angular 父子模块块大小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！