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

Question

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

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

这让我想到了 tree shaking，其中 webpack 可能会删除未使用的代码，但 AFAIK，tree shaking 会删除已导出但尚未导入的代码。在我的情况下，所有内容都是由 SharedModule 导入的，那么这到底是如何工作的呢？我会因为需要 1/100 个管道而有 99% 未使用的代码吗？

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

Answer 1

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

Example, this is your /shared directory structure. Consider creating an index.ts exporting all the files under /shared directory.

 /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

After creating an index.ts, supply all the exports under the shared directory:

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 }

So when you want to import just one 1 service/pipe/model to your other modules example UserModule just call the index barrel

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

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