# Large JavaScript bundles in Vanilla JS

> How to fix large javascript bundles in Vanilla JS — with the exact fix and copy-paste code.

_Category: Performance · Detector `resource-bloat` · Severity: warning_

Every kilobyte of JavaScript has to be downloaded, parsed, compiled, and executed before the page is interactive — and on a mid-range phone that work is many times slower than on your laptop. When one bundle ships the whole app up front, first interaction is delayed for everyone. AI-built apps balloon here by importing entire libraries for one helper and never code-splitting by route.

## The fix for Vanilla JS

Use dynamic `import()` to load heavy modules only when needed; modern bundlers split them into separate chunks automatically.

```js
button.addEventListener('click', async () => {
  const { openEditor } = await import('./editor.js') // separate chunk
  openEditor()
})
```

### Steps

1. Run a bundle analyzer to identify the largest chunks and dependencies
2. Code-split by route and lazy-load heavy, non-critical components
3. Replace whole-library imports with named/deep imports and remove duplicates

## How VibeCheck detects it

The `resource-bloat` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Large JS resource (250KB)`
- **Threshold:** ≥ 100KB transferred per JS/CSS resource in production (≥ 500KB in dev)

## FAQ

### Why is the threshold higher in development?

Dev bundles are unminified and include source maps and HMR runtime, so they’re legitimately large. VibeCheck raises the bar to 500KB on localhost and uses 100KB for production, where the size actually ships to users.

### What’s the fastest win?

Route-level code splitting. It ensures a user landing on one page doesn’t download the code for every other page. After that, lazy-load the heaviest individual components (editors, charts, maps).

### How do I find what’s making the bundle big?

Run a bundle analyzer (`@next/bundle-analyzer`, `rollup-plugin-visualizer`, or `source-map-explorer`). It shows a treemap of every module so you can spot an oversized dependency or an accidental whole-library import.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/large-javascript-bundles.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/large-javascript-bundles. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt