在 Angular 中，如果我导入一个共享模块但只需要其中的一件事，这不是一个不必要的巨大导入吗？

Question

假设我有一个SharedModule，它导入了一堆服务、管道等，然后在FeatureModuleA中我想使用 SharedModule 中声明的管道之一。

然后我导入 SharedModule，它可能包含 100 个不同的管道，但其中 99 个在 FeatureModuleA 中成为未使用的死代码。这不是效率很低吗？

这让我想到了 Tree Shaking，Webpack 可能会删除未使用的代码，但据我所知，Tree Shaking 会删除已导出但尚未导入的代码。就我而言，所有内容都是由 SharedModule 导入的，那么这到底是如何工作的呢？我会仅仅因为需要 1/100 个管道就拥有 99% 未使用的代码吗？

有人愿意解释一下吗？在官方文档中找不到任何信息。

Answer 1

如果您的应用程序正在增长并且您需要导入特定的服务/管道/模型。您可以尝试在您创建的每个模块中实现索引桶

例如，这是您的/shared目录结构。考虑创建一个index.ts导出 /shared 目录下的所有文件。

 /shared
      /services
          user.service.ts
          tenant.service.ts
      /pipes
          table.pipe.ts
      /models
          admin.model.ts
          product.model.ts
 index.ts                       --> Your index.ts
 shared.module.ts

创建index.ts后，提供共享目录下的所有导出：

export * from './services/user.service';
export * from './services/tenant.service';

export * from './table.pipe';

export * from './models/admin.model';
export * from './product.model';

您还可以在将其导入到共享模块时使用它，以避免一长串导入并促进单行导入样式

示例： 从 './index.ts' 导入 { UserService, TenantService, TablePipe, Admin, Product }

因此，当您只想将一个 1 服务/管道/模型导入到其他模块（例如UserModule）时，只需调用索引桶

import { UserService } from '../shared/index';

// or if you want to import 2 items e.g a service and a pipe
import { UserService, TablePipe } from '../shared/index';


@NgModule({
   declarations: [`...`],
   imports: [`...`],
   providers: [ UserService ]    --> imported from /shared index barrel
})
export class UserModule {}

这样，每当您的应用程序增长时，作为共享模块，您可以通过索引桶一项一项或两项或多项的组合来调用它们