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

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

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

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

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

不好。

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

@Angular - Common chunk在构建

1 个答案: