Skip to content

Shopify Dude Fix

Shopify UI Extension Bundle Too Large: How to Get Under the 64 KB Limit Before Deploy

Shopify UI extensions are subject to a 64 KB compressed JavaScript limit, with 128 KB for full-page customer account extensions. Here’s how to diagnose bundle weight before asking Shopify for an exception.

Quick answer

Shopify UI extensions on API version 2025-10 or later have a 64 KB compressed JavaScript limit per extension; full-page customer account extensions can use up to 128 KB. Build the app, inspect the bundle, remove avoidable dependencies and bundled translations, and request an exception only if the remaining weight is unavoidable.

On this page

Why this becomes a deployment problem

Bundle size is a platform constraint, not a performance suggestion. An extension can work locally and still fail deployment because its compiled bundle crosses the limit.

This matters during current API upgrades too. Shopify requires existing UI extensions in an app to use API version 2026-01 or later for the app to remain deployable after October 1, 2026.

Practical implementation details

Start with the production artifact rather than the size of your source folder. Run shopify app build. If the extension is too large, inspect the minified bundle and esbuild metafile to identify the largest contributors.

Look first for causes Shopify explicitly calls avoidable: heavy libraries, duplicate dependencies, and translations bundled into JavaScript instead of native localization APIs. A small local utility can cost less than a general-purpose package.

Do not remove required validation or business logic just to hit the number. Shopify provides an exception process for existing UI extensions that remain over the limit after reasonable optimization.

Common misunderstanding

“If Shopify offers an exception, I can skip optimization.” No. Shopify says exception requests can be denied for avoidable bundle weight. Treat the exception as the last step.

How to test this

  1. Run shopify app build on the branch and API version you intend to deploy.
  2. Record compressed size for each UI extension separately.
  3. Inspect the esbuild metafile for unexpectedly large or duplicated packages.
  4. Move translations to native localization and remove unnecessary dependencies.
  5. Build again and verify the extension is below its applicable limit.
  6. Retest the complete extension after optimization.
  7. If weight is unavoidable, prepare the minified bundle and metafile for Shopify’s exception review.

Sources and further reading