---
title: Inspect your Hydrogen app bundle size
description: Find out the dependencies that contribute to the bundle size of your app.
source_url:
  html: 'https://shopify.dev/docs/storefronts/headless/hydrogen/debugging/bundle-size'
  md: >-
    https://shopify.dev/docs/storefronts/headless/hydrogen/debugging/bundle-size.md
---

ExpandOn this page

* [Step 1: Build your app locally](https://shopify.dev/docs/storefronts/headless/hydrogen/debugging/bundle-size.md#step-1-build-your-app-locally)
* [Step 2: View the full bundle size report](https://shopify.dev/docs/storefronts/headless/hydrogen/debugging/bundle-size.md#step-2-view-the-full-bundle-size-report)
* [Step 3: Optimize your bundle](https://shopify.dev/docs/storefronts/headless/hydrogen/debugging/bundle-size.md#step-3-optimize-your-bundle)

# Inspect your Hydrogen app bundle size

[Deployments](https://shopify.dev/docs/storefronts/headless/hydrogen/deployments) might fail because your app's worker bundle exceeds Oxygen’s [file size limits](https://shopify.dev/docs/storefronts/headless/hydrogen/fundamentals#limitations). This guide shows you how to inspect the bundle size of your app and trace the dependencies that contribute to it.

***

## Step 1: Build your app locally

To inspect the bundle size of your app, you need to build it locally with the following command in your terminal:

## Terminal

```sh
npx shopify hydrogen build
```

The build process outputs the size of the app bundle in the terminal, along with a summary of the top dependencies and app files that make up the bundle.

This summary can give you a quick overview of what contributes to your app bundle size and where to look for potential optimizations. However, it only shows the top heaviest dependencies and application files after filtering out dependencies that are required, such as React and React Router.

***

## Step 2: View the full bundle size report

To view the full bundle size report, open the **Complete analysis** file generated at `dist/server/server-bundle-analyzer.html` with any web browser. To open the file, copy the file path beginning with `file://` that's displayed at the bottom of the build process output from the previous step, and then paste this path into your browser's address bar.

When the file opens, you can view several interactive charts that visualize the app bundle size.

![The full bundle size report.](https://shopify.dev/assets/assets/images/custom-storefronts/hydrogen/bundle-size-report-BM2EbFJ1.png)

By clicking the directories in the chart, you can drill down into the dependencies that contribute to the bundle size.

***

## Step 3: Optimize your bundle

Once you find the heaviest dependencies for your bundle size, you can start optimizing them. For example, you can try to do the following:

* Ensure that you're importing only the parts of a package that you need, not the whole package.
* Find alternative packages on NPM that are smaller in size. Particularly, you can look for packages that are built for the browser instead of Node.js.
* Replace large third-party API SDKs with raw HTTP requests to the API when possible.
* Use a CDN to load frontend-only dependencies instead of bundling them with your app.

***

* [Step 1: Build your app locally](https://shopify.dev/docs/storefronts/headless/hydrogen/debugging/bundle-size.md#step-1-build-your-app-locally)
* [Step 2: View the full bundle size report](https://shopify.dev/docs/storefronts/headless/hydrogen/debugging/bundle-size.md#step-2-view-the-full-bundle-size-report)
* [Step 3: Optimize your bundle](https://shopify.dev/docs/storefronts/headless/hydrogen/debugging/bundle-size.md#step-3-optimize-your-bundle)