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并且是Child Modules Needs

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的依赖关系，因此我必须将ExternalSourceSharedModule导入到SourceModule和EntityModule中以及代码:

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

SourceModule:

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

export class SourceModule {}

我在项目中使用@angular/cli，执行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然后执行ng build返回时，您可以看到这些块的大小现在大于1 MB.

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截图: https://box. everhelper.me/attachment/1011387/e86e6209-48b7-464d-912d-a5daa4f4cca4/227833-DmqHiBXBvJD2Puep/screen.png

环境: @angular: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屋！