---
title: Optimize bundle size
description: >-
  Keep your POS UI extension bundle small so it downloads, parses, and becomes
  interactive faster.
source_url:
  html: 'https://shopify.dev/docs/apps/build/pos/optimize-bundle-size'
  md: 'https://shopify.dev/docs/apps/build/pos/optimize-bundle-size.md'
api_name: pos-ui-extensions
---

# Optimize bundle size

POS UI extensions on API version `2025-10`+ run on [Remote DOM](https://shopify.dev/docs/apps/build/pos/upgrading-to-2025-10), which limits an extension's JavaScript bundle to 64 KB (compressed). The POS device downloads, parses, and runs that bundle before your extension renders, so a smaller bundle means staff wait less, which matters most on older devices and in-store networks. The limit is enforced per extension at deploy.

***

## Measure first

Before optimizing, generate an [esbuild metafile](https://shopify.dev/docs/apps/build/app-extensions#analyzing-bundle-size) to see what's in your bundle and which modules contribute the most. Regenerate it after changes to measure the impact.

***

## Replace heavy libraries

Prefer a platform primitive or browser built-in over a dependency. When you do need a library, choose a small, tree-shakeable one and import only what you use.

Common swaps:

| Instead of | Use |
| - | - |
| `react` / `react-dom` | `preact`, the Remote DOM runtime |
| `moment` | `dayjs`, or `date-fns` with per-function imports |
| `lodash` (full import) | the specific functions you need |
| `axios` | the built-in `fetch` |
| `crypto-js` | the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) |
| `Apollo Client` | the platform data APIs, or a plain `fetch` |

***

## Move data out of the bundle

Anything that isn't executable code usually belongs outside the bundle.

* **App data**: store it in [metafields](https://shopify.dev/docs/apps/build/metafields) or [metaobjects](https://shopify.dev/docs/apps/build/metaobjects) and read it at runtime, instead of embedding large object or array literals.
* **Translations**: deliver them through the native [localization APIs](https://shopify.dev/docs/apps/build/pos/localization).
* **Images**: consider hosting larger images and referencing them by URL instead of inlining them. A few tiny inline icons are fine, but dozens of them, or any sizable asset, add up quickly.

***

## Remove duplicate dependencies

If two dependencies pull in the same library at different versions, both copies ship. Align the declared versions so it's bundled once.

***

## Ship only the code you use

* Import specific functions, and keep dependencies tree-shakeable (ESM) so the bundler drops what you don't call.
* Prune reachable but unused code: dead imports, side-effectful modules, and non-tree-shakeable dependencies. (Genuinely unreachable modules are already dropped.)

***

## Structure your extensions

When you design and build a new extension, how you split functionality decides what each device downloads.

* **One feature per extension**: Separate capabilities a merchant enables independently, so a device loads only what the merchant turned on.
* **Don't combine targets that never render together**: Unrelated workflows in one extension make every render download code the staff member isn't using.

***

## Request an exception

If your extension can't be optimized under the limit, you can request a bundle-size exception. Exceptions are for extensions that are still over the limit once avoidable bloat is removed, because of genuine feature density or a platform gap with no native alternative yet.

To request one, submit the [bundle-size exception form](https://docs.google.com/forms/d/e/1FAIpQLSeb3yjIfdAardxHZo9DrZW_Qzx88javl_4Zm8Q29N6xCk_rMw/viewform). It asks for your minified bundle and its esbuild metafile, both produced when you build your extension.

***

## Next steps

[Upgrade to the latest API version\
\
](https://shopify.dev/docs/apps/build/pos/upgrading-to-2025-10)

[Upgrade to Polaris web components and Remote DOM.](https://shopify.dev/docs/apps/build/pos/upgrading-to-2025-10)

[Analyze your bundle size\
\
](https://shopify.dev/docs/apps/build/app-extensions#analyzing-bundle-size)

[Generate an esbuild metafile to see what's in your bundle.](https://shopify.dev/docs/apps/build/app-extensions#analyzing-bundle-size)

***