问题描述
我的应用程序结构如下:
I have application structure like this:
1. app
1. Shared Module
2. Modules
1. ExternalSourceModule
Child Modules
1. SourceModule
2. EntityModule
ExternalSourceSharedModule
-
ExternalSourceSharedModule
导入SharedModule
,因为共享模块具有应用程序级别的依赖性
ExternalSourceSharedModule
importsSharedModule
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 ofExternalSourceModule
- 3.chunk.js is
SourceModule
which is a child ofExternalSourceModule
当我从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
并查看构建统计信息.
您还可以使用 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/[email protected] for now. Otherwise, we may not reach to the shore.
这篇关于Angular父级和子级模块块大小问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!