@Angular语言 - 公共块在构建时获取延迟加载的内容

Question

如果延迟加载模块使用仅在该惰性模块中使用的一些通用代码，则特定的公共代码/模块在构建时会进入公共块，这会增加所有其他页面的首次加载时间。

下面的伪代码。

app.routing.module.ts

{ path: 'order', loadChildren: 'OrderModule' }

order.routing.module.ts

{ path: 'cart', loadChildren: 'CartModule' },
{ path: 'login', loadChildren: 'LoginModule' },
{ path: 'reviewcart', loadChildren: 'ReviewCartModule' }

购物车模块

imports: [OrderSharedModule]

ReviewCartModule.ts

imports: [OrderSharedModule]

OrderSharedModule 在 common.chunk中.js

吴版

@angular/cli: 1.3.0-beta.1
node: 6.11.0
os: win32 x64
@angular/animations: 4.3.0
@angular/common: 4.3.0
@angular/compiler: 4.3.0
@angular/core: 4.3.0
@angular/forms: 4.3.0
@angular/http: 4.3.0
@angular/platform-browser: 4.3.0
@angular/platform-browser-dynamic: 4.3.0
@angular/platform-server: 4.3.0
@angular/router: 4.3.0
@angular/cli: 1.3.0-beta.1
@angular/compiler-cli: 4.3.0
@angular/language-service: 4.3.0

Answer 1

这里讨论这个问题： https://github.com/angular/angular-cli/issues/7021

您可以通过禁用.angular-cli.json中的commonChunk选项来解决它，如下所示：

{ 
"defaults": {
"styleExt": "scss",
...
"build": {
"commonChunk": false
}
}
}

但请记住，这将意味着不再有一个common.chunk.js文件，所有共享依赖项，例如OrderSharedModule，将在需要它们的每个模块中复制。

不太好。

我目前正在寻找更好的解决方案...