dendrobundle

Track Vue bundle growth across every branch and release

Vue 3 projects built on Vite produce lean output by default, but that baseline drifts upward quickly once component libraries, i18n bundles, icon sets, and feature flags accumulate. Running a bundle analyzer once after something goes wrong is a poor substitute for continuous tracking. dendrobundle integrates into the same build step you run in CI, reads the Rollup stats that rollup-plugin-visualizer writes, and stores a per-commit record so you see the growth curve over time. Vue CLI (webpack-based) projects use the webpack stats path instead.

start free — no card try the free analyzer

Set it up for Vue

For Vite-based Vue projects, add rollup-plugin-visualizer to your vite.config with template: 'raw-data'. Vue CLI projects can emit a webpack stats file directly and use the webpack ingest path instead.

# vite.config.ts — visualizer({ template: 'raw-data', filename: 'dist/rollup-stats.json' })

# 1. build (writes dist/rollup-stats.json)
npm run build

# 2. submit the snapshot
curl -sS "https://dendrobundle.com/api/push?branch=$(git branch --show-current)&commit=$(git rev-parse HEAD)" \
  -H "Authorization: Bearer $DENDROBUNDLE_TOKEN" \
  -H "Content-Type: application/json" \
  -d @dist/rollup-stats.json

Full details on the supported formats and CI integration pages.

Vue bundle tracking — FAQ

My Vue project uses Vue CLI, not Vite. Does that change anything?
Vue CLI wraps webpack, so you use the webpack stats path. Run vue-cli-service build with webpack profiling, or configure stats output in vue.config.js. The resulting webpack stats JSON is what you POST — the same format as any webpack project.
We use Pinia and have many stores imported at startup. Will those show?
Yes. Pinia stores are ordinary modules from the bundler’s perspective. Imported eagerly at startup, they appear in the main chunk’s module list in the treemap; imported inside a lazy route, they appear in that route’s chunk. The treemap makes the import structure visible regardless of the pattern.
Does Nuxt work with this?
Nuxt 3 builds on Vite and Nitro. The client-side bundle follows the same Rollup stats path as a standard Vite/Vue project — POST the rollup-stats JSON from the client build. The server-side Nitro output is a separate build and would need its own project to track.
What counts against my snapshot limit on the Community tier?
Each POST to /api/push creates one snapshot. On Community (free), each project retains the 10 most recent snapshots; older ones roll off. The Developer tier removes that limit so the full history is retained.

Set up your Vue project on dendrobundle's free tier today, or upload a rollup-stats JSON at dendrobundle.com/analyze to see the current state of your bundle without an account.

create a free account