# 使用摇树优化 (/zh-CN/realtime-media/rtc/build/optimize-and-operate/tree-shaking)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

在 4.19.0 之前的版本中，AgoraRTC 模块是声网 Web SDK 中所有可调用方法的入口。

即使你实际上只使用了 SDK 的一部分功能，也需要加载完整的 SDK，这可能会导致 App 中包含大量未使用的代码。

自 4.19.0 起，通过 npm 集成的 Web SDK 支持 [Tree shaking](https://webpack.js.org/guides/tree-shaking/)（摇树优化）。使用 Tree shaking 具有以下优点：

- 只需要加载你实际使用的 SDK 功能，未引入的代码会在构建过程中被移除。
- 减少 SDK 依赖项与你的 App 依赖项之间的冗余。

自 4.22.0 版本起，除了核心模块外，SDK 还提供了多个独立服务模块可供选择性引入，例如实时审核、跨频道连麦、旁路推流等，以满足不同业务场景的需求。

为充分利用 Tree shaking 来尽可能减小集成 SDK 后的 App 体积，请参考本文集成 SDK 并使用正确的导入 (`import`) 方式。

 :::info[信息]
 受限于 SDK 架构设计，目前使用 Tree shaking 的优化效果有限。SDK 会在后续版本中持续改进 Tree shaking 效果。
 :::

## 前提条件 [#前提条件]

开始之前，请确保你已经安装 [Node.js 及 npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)。

## 实现方法 [#实现方法]

按照以下步骤集成 SDK，即可使用 Tree shaking：

1. 运行以下命令，通过 npm 安装最新版的 SDK 包：

   ```shell
   npm install agora-rtc-sdk-ng
   ```

2. 通过以下方式引入**所有**使用到的方法、枚举、常量、类型等，注意包名 `agora-rtc-sdk-ng` 末尾必须添加 `/esm`，否则 Tree shaking 将不会生效：

    ```javascript
    // 正确引入示例
    // 引入方法
    import { createClient } from "agora-rtc-sdk-ng/esm";
    // 引入枚举
    import { ConnectionDisconnectedReason } from "agora-rtc-sdk-ng/esm";
    // 引入常量
    import { VERSION } from "agora-rtc-sdk-ng/esm";
    // 引入类型
    import type { ICameraVideoTrack } from "agora-rtc-sdk-ng/esm";
    ```

3. 自 4.23.0 起，你可以通过以下方式按需集成不同的功能模块：

<Tabs defaultValue="planb">
<TabsList>
  <TabsTrigger value="planb">兼容 Plan-B</TabsTrigger>
  <TabsTrigger value="实时审核（鉴黄）">实时审核（鉴黄）</TabsTrigger>
  <TabsTrigger value="跨频道连麦">跨频道连麦</TabsTrigger>
  <TabsTrigger value="旁路推流">旁路推流</TabsTrigger>
</TabsList>

<TabsContent value="planb">

调用 `AgoraRTC.use` 方法，传入 `PlanBConnectionService`，即可集成兼容 [Plan-B](https://chromestatus.com/feature/5823036655665152) 的功能模块。

```javascript
// 引入核心模块
import { AgoraRTC } from "agora-rtc-sdk-ng/esm";
// 引入 plan-b 模块
import { PlanBConnectionService } from "agora-rtc-sdk-ng/services/planb-connection";

AgoraRTC.use(PlanBConnectionService);
```

</TabsContent>

<TabsContent value="实时审核（鉴黄）">

调用 `AgoraRTC.use` 方法，分别传入 `ImageModerationService` 和 `ContentInspectService`，即可集成实时审核功能。

```javascript
// 引入核心模块
import { AgoraRTC } from "agora-rtc-sdk-ng/esm";
// 引入实时审核（鉴黄）模块
import { ImageModerationService } from "agora-rtc-sdk-ng/services/image-moderation";
import { ContentInspectService } from "agora-rtc-sdk-ng/services/content-inspect";

AgoraRTC.use(ImageModerationService)
  .use(ContentInspectService);
```

</TabsContent>

<TabsContent value="跨频道连麦">

调用 `AgoraRTC.use` 方法，传入 `ChannelMediaRelayService`，即可集成跨频道连麦功能。

```javascript
// 引入核心模块
import { AgoraRTC } from "agora-rtc-sdk-ng/esm";
// 引入跨频道连麦模块
import { ChannelMediaRelayService } from "agora-rtc-sdk-ng/services/channel-media-relay";

AgoraRTC.use(ChannelMediaRelayService);
```

</TabsContent>

<TabsContent value="旁路推流">

调用 `AgoraRTC.use` 方法，传入 `LiveStreamingService`，即可集成旁路推流功能。

```javascript
// 引入核心模块
import { AgoraRTC } from "agora-rtc-sdk-ng/esm";
// 引入旁路推流模块
import { LiveStreamingService } from "agora-rtc-sdk-ng/services/live-streaming";

AgoraRTC.use(LiveStreamingService);
```

</TabsContent>
</Tabs>