javascript - Angular 2+ 加载整个模块还是只加载导出的组件？

Question

我有一个大模块，但只导出 1 个组件，当我导入该模块时，Angular 会加载整个模块还是只加载导出的组件，以便我可以控制性能？我不想将组件移动到公共(public)模块，因为它破坏了结构。谁能给我一个建议？

更新代码示例

说我有包含 3 个组件的 ModuleA 并且只导出其中的 1 个:

@NgModule({
  // ...
  exports: [
    ComponentA
  ],
  declarations: [
    ComponentA,
    ComponentB,
    ComponentC
  ]
})
export class ModuleA { }

在 ModuleB 中，我导入 ModuleA 以便我可以使用 ComponentA:

@NgModule({
  // ...
  imports: [
    ModuleA
  ]
})
export class ModuleB { }

当应用程序加载 ModuleB 时，它是只加载 ComponentA 还是加载 ModuleA 的所有组件？

Answer 1

所以如果你说:

module.ts

export const foo;

export const bar;

export const baz;

然后component.ts

import { foo } from './module'

我相信，在开发过程中，所有成员都可用，而在构建生产构建时，Angular AoT 构建会将其他成员摇树掉。它使用 Webpack 来执行此操作。

Webpacks tree shaking 机制解释如下: https://webpack.js.org/guides/tree-shaking/

这里是 Angular AoT 编译器的文档: https://angular.io/guide/aot-compiler

无论如何，尝试一个产品构建，如果一切正常，你应该没问题:)