javascript - @Angular - 公共(public) block 在构建时获取延迟加载的内容

Question

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

伪代码如下。

app.routing.module.ts

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

order.routing.module.ts

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

CartModule.ts

imports: [OrderSharedModule]

ReviewCartModule.ts

imports: [OrderSharedModule]

OrderSharedModule 进入 common.chunk.js

ng version

@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，将在需要它们的每个模块中复制。

不太好。

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