OtaKitHow to reduce your Capacitor app bundle size
Smaller bundles mean faster startups and faster OTA updates. Practical ways to shrink a Capacitor web bundle — code splitting, asset optimization, tree shaking — and why delta updates finish the job.
A smaller web bundle helps a Capacitor app twice: it starts faster on device, and it ships faster over the air. Every megabyte you cut is a megabyte devices don't download on each update. This guide walks through the highest-leverage ways to shrink a Capacitor bundle, roughly in order of impact.
Mental model: startup speed and OTA update speed are the same problem — both are gated by bundle size. Optimize once, win twice.
1. Measure first
Don't guess. Run a bundle analyzer to see what's actually big. For Vite:
npm install -D rollup-plugin-visualizer # add visualizer() to your Vite plugins, build, and open the report
Nine times out of ten the culprits are a heavy dependency you can drop, a giant image bundled as a module, or a library imported whole when you use one function.
2. Code-split and lazy-load routes
Ship only what the first screen needs; load the rest on demand. Route-level lazy loading is the biggest single win for most apps:
// React example
const Settings = lazy(() => import("./routes/Settings"));
// dynamic import anywhere
const heavy = await import("./heavyThing");3. Trim and tree-shake dependencies
- Import named exports, not whole libraries:
import { debounce } from "lodash-es", not the entire package. - Replace heavy libraries with lighter ones — a date library you use for one format call is rarely worth 60 KB.
- Drop dependencies you no longer use; they accumulate silently.
4. Optimize assets
Images are usually the biggest non-code weight. Serve modern formats (WebP/AVIF), size them to their real display dimensions, and load large or below-the-fold images lazily. Consider hosting truly large media remotely and fetching at runtime rather than bundling it — that also keeps it out of every OTA update.
5. Let production builds do their job
Make sure you ship minified production builds with source maps stripped (or uploaded separately), and that any dev-only tooling is excluded. It sounds obvious, but shipping a dev build to a native app is a surprisingly common size leak.
6. Then let deltas finish the job
Once the bundle is lean, delta updates ensure devices download only what changed between releases — so a small code change is a small download even if the total bundle is a few megabytes. Turn them on with:
otakit upload --release --strategy deltas
See delta updates explained for how that works.
The compounding effect: a leaner bundle makes every full download faster, and deltas make every incremental update tiny. Do both.
Where to go next
Read how OTA works to see where bundle size affects delivery, and the update strategies docs for delta configuration.