在 typescript 中实现 tree-shaking答案

【问题标题】：Implement tree-shaking in typescript在 typescript 中实现 tree-shaking
【发布时间】：2021-12-29 10:09:24
【问题描述】：

我正在使用 TypeScript 和 OpenTelemetry 构建一个可重复使用的遥测库。我正在尝试了解如何实现 tree-shaking 以便消费者可以只导入他们需要的模块而不是所有内容，这样他们就可以减少整体包的大小。项目结构是这样的，

lib
|
|__ trace
|    |____ TraceClass.ts
|    |____ index.ts
|
|__ metrics
|    |____ MetricClass.ts
|    |____ index.ts
|
|__ logs
|    |____ LogClass.ts
|    |____ index.ts
|
|__ index.ts

我将三个主要模块“trace”、“log”和“metrics”作为单独的文件夹。如您所见，每个模块都有自己的“index.ts”文件，并且有一个根“index.ts”文件。假设根“index.ts”文件是否导出了子模块之类的所有内容。

根索引.ts

export * from './trace';
export * from './metrics';
export * from './logs';

假设消费者从根文件中导入TraceClass，如下所示，

import { TraceClass } from 'mytelemetrylib';

上述代码是否导入了代码中的所有模块？

或者他们必须这样做？

import { TraceClass } from 'mytelemetrylib/trace';

【问题讨论】：

提供摇树效果始终是消费者的责任。这取决于他们的构建过程。库开发人员无法知道将请求哪些模块。

标签： typescript tree-shaking

【解决方案1】：

如果在跟踪文件夹的index.ts 中：

lib
|
|__ trace
|    |____ TraceClass.ts
|    |____ index.ts

您已经导出了所有内容（例如export * from './TraceClass';）并且在TraceClass.ts 中也导出了该类（例如export class TraceClass）然后import 可以访问所有明确导出的内容（例如import { TraceClass } from 'mytelemetrylib'; 将够了）。

此外，为了代码清晰，您可以“命名空间”导出。例如：

export * as Trace from './trace';
export * as Metrics from './metrics';
export * as Logs from './logs';

然后消费者可以导入：

import { Trace, Metrics, Logs } from 'mytelemetrylib';

并将它们用于：

Trace.TraceClass // or any other explicitly exported trace related functionality.

【讨论】：