Bundle Size

Bundle size is the cost a user pays before anything appears on screen. It is also the easiest number to read: vite build prints every file it wrote with its raw size and its gzip size, and the gzip column is what travels over the network. A chunk larger than build.chunkSizeWarningLimit, 500 kB by default, gets a warning in that report.

Tree shaking

Tree shaking drops exports that nobody imports. It needs ES modules and a package that is honest about side effects. Vue itself is built for it: if you never use <Transition>, it is not in the output, and compiling templates at build time instead of shipping the runtime compiler saves about 14 kB min+gzip.

The imports that defeat it

Three patterns keep whole libraries in the bundle. A CommonJS build cannot be analysed statically — lodash ships one, lodash-es does not. A default or namespace import (import * as lib) pulls everything the library exports. And a barrel file that re-exports a hundred modules can drag all of them in for one named import. Check what a dependency costs before you add it.

Splitting the rest

What you cannot delete, you can defer. import('./heavy') returns a promise and gives that module its own chunk, fetched the first time the call runs, so a chart library used on one page stops being part of the first download.

<script setup lang="ts">
import { debounce } from 'lodash-es'
import { onUnmounted, ref } from 'vue'

const emit = defineEmits<{
  search: [term: string]
}>()

const term = ref('')

const emitSearch = debounce((value: string) => emit('search', value), 300)

function onInput(): void {
  emitSearch(term.value)
}

onUnmounted(() => {
  emitSearch.cancel()
})
</script>

<template>
  <form @submit.prevent>
    <label for="report-search">Search reports</label>
    <input
      id="report-search"
      v-model="term"
      type="search"
      @input="onInput"
    />
  </form>
</template>

<style scoped>
form {
  display: flex;
  gap: 0.5rem;
}
</style>

# npm run build
# (the shape of the report; your filenames, hashes and sizes will differ)
dist/index.html                      0.46 kB | gzip:   0.30 kB
dist/assets/index-DqF3xQ1y.css      12.88 kB | gzip:   3.21 kB
dist/assets/ReportsView-B1n94kPz.js 18.44 kB | gzip:   6.02 kB
dist/assets/index-CkP2a7Vb.js      148.73 kB | gzip:  54.11 kB

// src/lib/slug.ts

// Pulls in a CommonJS build of the whole library, roughly 70 kB minified and
// about 25 kB gzipped, because a bundler cannot statically see which parts are
// unused.
import lodash from 'lodash'

export function slugFromWholeLibrary(text: string): string {
  return lodash.kebabCase(text)
}

// Pulls in kebabCase and its internal helpers only, a few hundred bytes.
import { kebabCase } from 'lodash-es'

export function slug(text: string): string {
  return kebabCase(text)
}

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    // Warn earlier than the 500 kB default so growth is visible in review.
    chunkSizeWarningLimit: 300,
    reportCompressedSize: true,
    sourcemap: true
  }
})