在延迟加载模块中将页面组件与功能组件分离

Question

在处理大型单模块 Angular 5 应用程序时，我试图将其划分为多个模块以提高可维护性和性能（延迟加载）。

我做了什么

我创建了多个专门用于延迟加载的模块。它们包含

1. 导航到路线时应呈现的主要组件（页面）
2. 子路由的所有组件（页面）
3. 上述组件中使用的所有功能组件（不可路由）。

因为我需要在多个模块中使用某些功能组件，所以我正在考虑

1. 继续使用我当前的结构并仅导出功能组件

2. 将功能组件提取到单独的共享模块中

我的问题

性能方面，当（延迟加载）模块需要从另一个模块导入功能组件时，我选择上述哪个选项会有所不同吗？

Answer 1

我特别喜欢功能 2，您将功能组件提取到单独的共享模块中，以使用 Angular Material 为例，您可能拥有所有页面，包括延迟加载和非延迟加载，使用大约 5 或6 个模块重复，将这些模块单独导入到延迟加载的组件模块中会浪费时间和资源，而是将模块（功能模块）放入共享模块中会更有条理在每个延迟加载的模块中重复使用。

我通过一个简单的模块实现了这一点：-

@NgModule({
  imports: [
    ANGULAR_MODULES,
    MATERIAL_MODULES,
    COVALENT_MODULES,
    OTHER_MODULES
  ],
  declarations: [],
  exports: [
    ANGULAR_MODULES,
    MATERIAL_MODULES,
    COVALENT_MODULES,
    OTHER_MODULES
  ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [SERVICES]
    };
  }
}

此模块包括所有重用的模块和服务。然后要使用它们，我只需将它们添加到我的延迟加载模块中：-

@NgModule({
  imports: [
    CommonModule,
    UsersRoutingModule,
    SharedModule
  ],
  declarations: [UsersComponent]
})
export class UsersModule {
}