App size optimization
Updated
Reduce the size of apps that integrate Agora SDK
Reducing the app size is of great significance in improving user experience. A smaller package size means that users consume less bandwidth and time to download the app. Consider the following use-cases where app size optimization is critical:
-
There are strict requirements on the size of the app. For example, running the app on smart wearable devices with limited storage space.
-
The target user group of the app is located in underdeveloped areas. The poor network connectivity causes the app download time to be too long.
This page shows you how to optimize the size of apps that integrate the Voice SDK.
Reduce the app size
To reduce the app size, implement the following strategies:
Use tree shaking
In versions before v4.19.0, the AgoraRTC module is the entrance to all callable methods in the Web Video SDK. Even if you only use a part of the Video SDK's functionality, you still need to load the complete SDK, which may result in the app containing a lot of unused code.
Starting from version 4.19.0, the Video SDK for Web has integrated tree shaking support. Using tree shaking has the following advantages:
- Only load the SDK features you actually use, unreferenced code is removed during the build process.
- Reduce redundancy between SDK dependencies and your app dependencies.
Starting from version 4.22.0, in addition to the core modules, the SDK also provides multiple independent service modules for optional use, such as media stream relay and live streaming, to meet the needs of different business use-cases.
The optimization effect of tree shaking is currently limited by the SDK architecture. Agora will continue to improve the tree shaking effect in future versions.
To use tree shaking, follow these steps to integrate the SDK:
-
Run the following command to install the latest SDK package using npm:
npm install agora-rtc-sdk-ng -
Import all used methods, enumerations, constants, types, and so on by adding
/esmat the end of the package nameagora-rtc-sdk-ng:// Example of correct reference citation method import { createClient } from "agora-rtc-sdk-ng/esm"; // Import enum import { ConnectionDisconnectedReason } from "agora-rtc-sdk-ng/esm"; // Import constant import { VERSION } from "agora-rtc-sdk-ng/esm"; // Import type import type { ICameraVideoTrack } from "agora-rtc-sdk-ng/esm"; -
Starting from version 4.23.0, you can integrate the functional modules you need as follows:
// Import core module import { AgoraRTC } from "agora-rtc-sdk-ng/esm"; // Import Plan-B module import { PlanBConnectionService } from "agora-rtc-sdk-ng/services/planb-connection"; AgoraRTC.use(PlanBConnectionService);// Import core module import { AgoraRTC } from "agora-rtc-sdk-ng/esm"; // Import real-time moderation (content moderation) module 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);// Import core module import { AgoraRTC } from "agora-rtc-sdk-ng/esm"; // Import cross-channel media relay module import { ChannelMediaRelayService } from "agora-rtc-sdk-ng/services/channel-media-relay"; AgoraRTC.use(ChannelMediaRelayService);// Import core module import { AgoraRTC } from "agora-rtc-sdk-ng/esm"; // Import live streaming service module import { LiveStreamingService } from "agora-rtc-sdk-ng/services/live-streaming"; AgoraRTC.use(LiveStreamingService);
Reference
This section contains content that completes the information in this page, or points you to documentation that explains other aspects to this product.
