使用 Tree shaking

在 4.19.0 之前的版本中，AgoraRTC 模块是声网 Web SDK 中所有可调用方法的入口。即使你实际上只使用了 SDK 的一部分功能，也需要加载完整的 SDK，这可能会导致 App 中包含大量未使用的代码。

自 4.19.0 起，通过 npm 集成的 Web SDK 支持 Tree shaking（摇树优化）。使用 Tree shaking 具有以下优点：

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

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

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

信息

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

前提条件

开始之前，请确保你已经安装 Node.js 及 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.22.0 起，你可以通过以下方式按需集成不同的功能模块：

   实时审核（鉴黄）

   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);

   跨频道连麦

   JavaScript

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

   旁路推流

   JavaScript

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