The 69 Chunk Files Behind app.onepassapps.com: What the Image Studio Actually Downloads

I work on OnePassApps, so this is our own product, measured on today's build. Everything below was measured with plain HTTPS requests from outside the browser, plus the network log of the visible Chrome on our own machine with the cache switched off.

Our app is one React application, but it is not shipped as one file. The home page loads an entry bundle, and that bundle names 69 further chunk files it can pull in later. Here is that map, and what two of our routes really download from it.

The entry bundle

The entry file is assets/index-CKM47TUG.js. It answers HTTP 200 with content type application/javascript, cache control public, max-age=31536000, immutable and its own ETag.

Uncompressed: 321,856 bytes
With gzip: 90,779 bytes
With brotli: 90,615 bytes

Inside it sits a build-tool dependency table (__vite__mapDeps) that names the chunk files the app may load later. Scanning the bundle for assets/...js paths turns up 69 unique chunk filenames, and the bundle mentions assets/ 71 times in total. Only three import( calls appear in the entry file itself, so nearly everything else arrives through that table rather than through a literal import in the code you can read.

All 69 chunks are live and immutable

I fetched every one of the 69 names the bundle points at.

69 of 69 answered HTTP 200. None was missing.
Every one is served as application/javascript.
Every one carries public, max-age=31536000, immutable.
Every one has its own ETag, so a browser that does revalidate can be answered with a 304 instead of a fresh copy, and the one-year immutable cache means most repeat visits skip the request entirely.

Together the 69 files are 1,526,286 bytes uncompressed, or 500,824 bytes with gzip when each file is compressed on its own.

The biggest are:

esm-BiHrllLi.js - 475,117 bytes (154,134 with gzip)
app-shell-shared-D9IUHDyB.js - 369,097 bytes (116,277 with gzip)
App-C1PmGEon.js - 149,794 bytes (47,382 with gzip)
AdminPortal-BGGVl4L4.js - 79,428 bytes (21,696 with gzip)
app-shell-ui-2BMwh87F.js - 75,843 bytes (23,009 with gzip)
mobile-dashboard-components-SnnmkVcI.js - 68,490 bytes (22,122 with gzip)

And the smallest are the ones you would expect to be tiny: queryOptions-Dfvzj6n2.js at 38 bytes, clamp-D0kAXd-u.js at 85, resolveAriaLabelledBy-B2ZzrlGb.js at 99, and MinusSignIcon-DGIm2EHe.js at 143.

There is no source map next to the entry file. assets/index-CKM47TUG.js.map answers 404 and serves an HTML page instead, so the shipped code is minified and the map is not published.

What a route actually downloads

The manifest is only half the story. The useful question is which of those 69 files a given page pulls down. I recorded the network log of the visible Chrome with the cache disabled, on two routes.

On the Image Studio page the browser fetched 119 JavaScript files. 111 of them were our own chunks, 1 was the shell-fallback.js fallback, 6 came from clerk.onepassapps.com for the sign-in interface, and 1 was Cloudflare's email-decode.min.js.

On the home page it fetched 125 JavaScript files, 117 of them ours, with the same 6 sign-in files and the same Cloudflare helper.

Set the two lists against each other and the split is clear:

92 chunks are shared by both routes.
19 are unique to the Image Studio.
25 are unique to the home page.

The studio-only names say exactly what they are: StudiosRoute, StudioModule, StudioWorkbench, tool-host, tool-classes, file-io, resource-scope, DropZone, ReadyReveal, PageGrid, clipboard, keys, LiveRegion and the rest. The home-only names are the home page's own parts: HomeAppsDiscoveryPanel, PlansAndCreditsView, MovieTrackerPreview, movie-tracker-api, catalogue, SamHologram, account-tab, FeedLayout, Player and provider-media.

So the file names in a public build are a readable map of the product. The billing and admin screens have their own chunks (AdminPortal, BillingAdminPanel, billing-queries), the vote board has app-voting-queries, the guides have app-guides, and the account screens have useAccountCredits and CreditMeter.

Why it is worth measuring

Two numbers decide how fast our app feels: the entry bundle and the chunks a route adds on top. We ship the entry bundle with a one-year immutable cache, so the second visit to any route costs nothing. The first visit to the Image Studio pulls 111 of our chunks, and the shared 92 of them are the same files the home page uses.

Reproduce it yourself

The whole map can be rebuilt with three commands and no browser:

curl -s https://app.onepassapps.com/assets/index-CKM47TUG.js \ | grep -o 'assets/[A-Za-z0-9_.-]*\.js' | sort -u | wc -l curl -s -o /dev/null -w '%{http_code} %{size_download}\n' \ https://app.onepassapps.com/assets/esm-BiHrllLi.js curl -s -o /dev/null -w '%{http_code}\n' \ https://app.onepassapps.com/assets/index-CKM47TUG.js.map