# App size optimization (/en/realtime-media/broadcast-streaming/build/optimize-quality-and-connection/app-size-optimization/web)

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

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 with integrated Video SDK.

    ## Reduce the app size [#reduce-the-app-size]

    To reduce the app size, implement the following strategies:

    ### Use tree shaking [#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](https://webpack.js.org/guides/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.

    <CalloutContainer type="info">
      <CalloutDescription>
        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.
      </CalloutDescription>
    </CalloutContainer>

    To use tree shaking, follow these steps to integrate the SDK:

    1. Run the following command to install the latest SDK package using npm:

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

    2. Import all used methods, enumerations, constants, types, and so on by adding `/esm` at the end of the package name `agora-rtc-sdk-ng`:

       ```javascript
       // 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";
       ```

    3. Starting from version 4.23.0, you can integrate the functional modules you need as follows:

    **Plan B**

    ```js
    // 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);
    ```

    **Content moderation**

    ```js
    // 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);
    ```

    **Channel media relay**

    ```js
    // 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);
    ```

    **Live streaming**

    ```js
    // 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 [#reference-3]

    This section contains content that completes the information in this page, or points you to documentation that explains other aspects to this product.

    ### Frequently asked questions [#frequently-asked-questions-3]

    * [Why are dynamic libraries preferred over static libraries in the Video SDK](/en/api-reference/faq/integration/dynamic_or_static_library)