Build & Bundle Analysis

Vite uses esbuild for dev and Rollup for production builds — fast, small bundles. Visualize chunks to catch accidental bloat.

4 min read Level 2/5 #vue#vite#build

What you'll learn

Run vite build
Analyze the bundle with rollup-plugin-visualizer
Set chunkSizeWarningLimit sensibly

vite build takes your app and produces an optimized dist/ ready for any static host. Default output: minified JS/CSS, hashed filenames, automatic code splitting per dynamic import.

Building

npm run build

dist/
  index.html
  assets/
    index-a8f9.js
    index-c012.css
    Admin-b7c4.js     # split from dynamic import

Filenames include a content hash so caching is safe.

Preview Locally

npm run preview

Serves dist/ on a local port — closest thing to testing the actual production build.

Bundle Visualization

Install the visualizer and add it to your Vite config:

npm i -D rollup-plugin-visualizer

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [vue(), visualizer({ open: true })],
}

After npm run build it opens an HTML report in your browser — a treemap of every chunk and module.

Common Wins

Replace moment with dayjs (or use Intl).
Tree-shake lodash: import debounce from 'lodash/debounce', not import _ from 'lodash'.
Audit imports of icon libraries (use per-icon imports).

Chunk Size Warning

Vite warns above 500 KB per chunk. If your chart page is intentionally big, raise the limit instead of silencing legit warnings:

export default {
  build: { chunkSizeWarningLimit: 800 },
}

Deployment →