Skip to content

Smaller bundle#7013

Open
gonzaloriestra wants to merge 25 commits intomainfrom
smaller-bundle
Open

Smaller bundle#7013
gonzaloriestra wants to merge 25 commits intomainfrom
smaller-bundle

Conversation

@gonzaloriestra
Copy link
Contributor

@gonzaloriestra gonzaloriestra commented Mar 13, 2026

WHY are these changes introduced?

The CLI bundle is larger than necessary.

WHAT is this pull request doing?

Reduces CLI bundle size by ~55% (62 MB28 MB)

  • Enable minifyWhitespace and minifyIdentifiers in esbuild (previously only minifySyntax was on)
  • Exclude source map files from the npm package via !/dist/**/*.map in files (maps are still generated for Observe)
  • Replace brotli JS package with native zlib.brotliCompressSync
  • Simplify entry point to ['./src/index.ts'] instead of globbing all .ts files

How to test your changes?

  • pnpm bundle-for-release and check dist folder
  • npm i -g --@shopify:registry=https://registry.npmjs.org @0.0.0-snapshot-20260318104923
  • shopify app deploy (exercises brotli compression)

Measuring impact

How do we know this change was effective? Please choose one:

  • n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
  • Existing analytics will cater for this addition
  • PR includes analytics changes to measure impact

Checklist

  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've considered possible documentation changes

… — saves ~5,904 KB\n\nResult: {"status":"keep","bundle_kb":125332,"js_kb":46412,"maps_kb":74152,"assets_kb":4768}
…784, maps: -2,328)\n\nResult: {"status":"keep","bundle_kb":111220,"js_kb":34628,"maps_kb":71824,"assets_kb":4768}
…ings)\n\nResult: {"status":"keep","bundle_kb":99508,"js_kb":30844,"maps_kb":63896,"assets_kb":4768}
…. Already lazy-loaded via dynamic import.\n\nResult: {"status":"keep","bundle_kb":76368,"js_kb":22848,"maps_kb":48752,"assets_kb":4768}
…ble at runtime as project dep.\n\nResult: {"status":"keep","bundle_kb":57192,"js_kb":16500,"maps_kb":35924,"assets_kb":4768}
…dable (identifiers not minified).\n\nResult: {"status":"keep","bundle_kb":21440,"js_kb":16500,"maps_kb":172,"assets_kb":4768}
…36)\n\nResult: {"status":"keep","bundle_kb":16776,"js_kb":11836,"maps_kb":172,"assets_kb":4768}
…,132 KB\n\nResult: {"status":"keep","bundle_kb":15644,"js_kb":10704,"maps_kb":172,"assets_kb":4768}
…s 524 KB\n\nResult: {"status":"keep","bundle_kb":15120,"js_kb":10180,"maps_kb":172,"assets_kb":4768}
… KB\n\nResult: {"status":"keep","bundle_kb":14128,"js_kb":9188,"maps_kb":172,"assets_kb":4768}
…conciler@0.29.2) — saves 424 KB\n\nResult: {"status":"keep","bundle_kb":13704,"js_kb":8764,"maps_kb":172,"assets_kb":4768}
…ed impact)\n\nResult: {"status":"keep","bundle_kb":13592,"js_kb":8652,"maps_kb":172,"assets_kb":4768}
…Result: {"status":"keep","bundle_kb":13176,"js_kb":8236,"maps_kb":172,"assets_kb":4768}
…-parser, @vscode/web-custom-data — saves 1,136 KB\n\nResult: {"status":"keep","bundle_kb":12040,"js_kb":7100,"maps_kb":172,"assets_kb":4768}
…mver, yaml, js-yaml, execa — saves 1,100 KB\n\nResult: {"status":"keep","bundle_kb":10940,"js_kb":6000,"maps_kb":172,"assets_kb":4768}
…eing bundled) — saves 348 KB\n\nResult: {"status":"keep","bundle_kb":10592,"js_kb":5652,"maps_kb":172,"assets_kb":4768}
… 20+ more runtime deps — saves 1,868 KB\n\nResult: {"status":"keep","bundle_kb":8724,"js_kb":3784,"maps_kb":172,"assets_kb":4768}
@gonzaloriestra
Copy link
Contributor Author

/snapit

@github-actions
Copy link
Contributor

github-actions bot commented Mar 13, 2026

Coverage report

St.
Category Percentage Covered / Total
🟢 Statements 82.73% 14566/17607
🟡 Branches 75.15% 7228/9618
🟢 Functions 82.03% 3701/4512
🟢 Lines 83.18% 13768/16553

Test suite run success

3806 tests passing in 1462 suites.

Report generated by 🧪jest coverage report action from 195248b

@gonzaloriestra
Copy link
Contributor Author

/snapit

@github-actions
Copy link
Contributor

🫰✨ Thanks @gonzaloriestra! Your snapshot has been published to npm.

Test the snapshot by installing your package globally:

npm i -g --@shopify:registry=https://registry.npmjs.org @shopify/cli@0.0.0-snapshot-20260313171105

Caution

After installing, validate the version by running shopify version in your terminal.
If the versions don't match, you might have multiple global instances installed.
Use which shopify to find out which one you are running and uninstall it.

Copy link
Contributor Author

/snapit

@github-actions
Copy link
Contributor

🫰✨ Thanks @gonzaloriestra! Your snapshot has been published to npm.

Test the snapshot by installing your package globally:

npm i -g --@shopify:registry=https://registry.npmjs.org @shopify/cli@0.0.0-snapshot-20260317160706

Caution

After installing, validate the version by running shopify version in your terminal.
If the versions don't match, you might have multiple global instances installed.
Use which shopify to find out which one you are running and uninstall it.

Copy link
Contributor Author

/snapit

@github-actions
Copy link
Contributor

🫰✨ Thanks @gonzaloriestra! Your snapshot has been published to npm.

Test the snapshot by installing your package globally:

npm i -g --@shopify:registry=https://registry.npmjs.org @shopify/cli@0.0.0-snapshot-20260318104923

Caution

After installing, validate the version by running shopify version in your terminal.
If the versions don't match, you might have multiple global instances installed.
Use which shopify to find out which one you are running and uninstall it.

@gonzaloriestra gonzaloriestra marked this pull request as ready for review March 18, 2026 14:38
@gonzaloriestra gonzaloriestra requested a review from a team as a code owner March 18, 2026 14:38
@github-actions
Copy link
Contributor

We detected some changes at packages/*/src and there are no updates in the .changeset.
If the changes are user-facing, run pnpm changeset add to track your changes and include them in the next release CHANGELOG.

Caution

DO NOT create changesets for features which you do not wish to be included in the public changelog of the next CLI release.

Copy link
Contributor

@craigmichaelmartin craigmichaelmartin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So cool! Thank you for leading these autoresearch improvements!!

Copy link
Contributor

@dmerand dmerand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love this approach overall! Review found a couple of concerns worth addressing prior to shipping.

esBuild({
bundle: true,
entryPoints: ['./src/**/*.ts'],
entryPoints: ['./src/index.ts'],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change from globbing all .ts files to a single "./src/index.ts" entry point breaks the oclif hooks configuration.

The Problem

The oclif configuration in packages/cli/package.json expects these hook files:

"hooks": {
  "prerun": "./dist/hooks/prerun.js",
  "postrun": "./dist/hooks/postrun.js"
}

These source files exist:

  • packages/cli/src/hooks/prerun.ts
  • packages/cli/src/hooks/postrun.ts

However, packages/cli/src/index.ts does NOT import or export these hooks. They are meant to be standalone files per oclif convention.

Impact

With the old config (entryPoints: ["./src/**/*.ts"]):

  • esbuild finds all .ts files via glob
  • Creates corresponding .js files maintaining directory structure
  • Outputs dist/hooks/prerun.js and dist/hooks/postrun.js

With the new config (entryPoints: ["./src/index.ts"]):

  • esbuild only bundles what's reachable from index.ts
  • Since prerun/postrun aren't imported by index.ts, they're unreachable
  • No dist/hooks/prerun.js or dist/hooks/postrun.js files are created
  • oclif will fail when trying to load these hooks at runtime

Fix Options

  1. Keep the glob pattern: entryPoints: ["./src/**/*.ts"]
  2. Add explicit entry points: entryPoints: ["./src/index.ts", "./src/hooks/prerun.ts", "./src/hooks/postrun.ts"]
  3. Import/export the hooks in index.ts (not recommended - they're meant to be separate files per oclif convention)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Ref Line 56) 🐛 Bug: The configuration uses sourcemap: true, which generates inline sourcemaps embedded directly in the .js files rather than separate .map files. This means the !/dist/**/*.map exclusion in package.json has no effect, and sourcemaps are shipped to npm users inside the bundles, directly contradicting the PR's goal of reducing bundle size by ~55%. An earlier commit noted that disabling sourcemaps saved 35,752 KB.

Suggestion:

Suggested change
sourcemap: 'external',

This will generate separate .map files that can be uploaded to Observe while being excluded from the npm package via the existing !/dist/**/*.map pattern.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants