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

ExternalSourceSharedModule imports SharedModule because shared module has application level dependencies
ExternalSourceModule and it child modules imports ExternalSourceSharedModule because ExternalSourceSharedModule has some dependencies which ExternalSourceModule and it's Child Modules Needs

Code of ExternalSourceSharedModule:

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

Code of ExternalSourceModule which imports ExternalSourceSharedModule

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

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

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]

Let assume:

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

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]

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.

Currently removing ExternalSourceSharedModule from child modules breaks my application.

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

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

Hope i have cleared my question.

回答1:

I think @brijmcq is missing something.

@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.

run a command like this:

ng build -prod --aot

and see the build stats.

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

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.

Update 1:

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

回答2:

Since you are lazy loading your modules ( Source and Entity modules ) you need to import ExternalSourceSharedModule to each of the modules. Taken from the official docs

What if I import the same module twice?

That's not a problem. When three modules all import Module 'A', Angular evaluates Module 'A' once, the first time it encounters it, and doesn't do so again.

To make your build smaller, try to do a production build ( if you are using the latest angular-cli, using just --prod is AOT enabled.

ng build --prod

Hope this helps.

来源：https://stackoverflow.com/questions/44972548/angular-parent-and-child-modules-chunk-sizes-issue

标签

angular

Webpack

lazy-loading

angular-routing