# How to Optimize Vite Builds for Production in the Quiz-App

> Optimize Vite builds for production in your quiz-app by configuring minification, code splitting, and more in vite.config.js. Reduce bundle size and improve load times.

- Repository: [Microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Tags: performance
- Published: 2026-02-27

---

**You can optimize Vite builds for production in the quiz-app by configuring minification, code splitting, asset inlining, and vendor chunking in [`vite.config.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/vite.config.js) to significantly reduce bundle size and improve load times for learners.**

The quiz-app in the `microsoft/Web-Dev-For-Beginners` repository provides an interactive learning environment built with Vue 3 and Vite. While Vite offers a fast development server, the default production build configuration leaves room for optimization. This guide demonstrates how to tailor the **build configuration** to create leaner, faster-loading bundles suitable for deployment on Azure Static Web Apps or any static hosting platform.

## Why Optimize Vite Production Builds?

Vite’s development server leverages native ES modules for speed, but production builds require additional processing to eliminate unnecessary code, compress assets, and optimize delivery. Without these optimizations, the quiz-app may ship oversized JavaScript bundles, unused source maps, and unoptimized assets that slow down the experience for learners on slower connections. Proper **build optimization** ensures the application remains lightweight and responsive.

## Core Build Pipeline in the Quiz-App

The quiz-app uses a standard Vite setup defined in [`quiz-app/package.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/package.json). The build process is triggered via:

```bash
npm run build   # Executes 'vite build'

```

The current configuration in [`quiz-app/vite.config.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/vite.config.js) is minimal, defining only the Vue plugin and a path alias:

```javascript
// Current minimal configuration
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

```

Because the configuration is minimal, you can safely add production-oriented options without disrupting the learning flow or breaking existing functionality.

## Production Optimization Strategies

### Minification and Source Maps

By default, Vite uses `esbuild` for minification, which provides an excellent balance between speed and compression. For maximum compatibility with legacy browsers, you can switch to `terser`, though this increases build time.

Disable source maps in production to prevent shipping unnecessary kilobytes:

```javascript
build: {
  minify: 'esbuild',    // or 'terser' for smaller bundles
  sourcemap: false,     // Eliminates ~30KB of map files
}

```

### Asset Optimization

Configure `assetsInlineLimit` to convert small files into data URIs, reducing HTTP requests. The default 4096 bytes (4KB) works well for icons and small SVGs like `quiz-app/src/assets/logo.svg`:

```javascript
build: {
  assetsInlineLimit: 4096,  // Inline files ≤ 4KB
}

```

Enable `cssCodeSplit` to keep CSS for async routes in separate files, allowing parallel loading:

```javascript
build: {
  cssCodeSplit: true,  // Default: keeps CSS separate per chunk
}

```

### Code Splitting and Chunking

Use `manualChunks` in `rollupOptions` to isolate vendor libraries like Vue into a separate chunk. This improves caching because the vendor bundle changes less frequently than application code:

```javascript
build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return 'vendor';  // Creates vendor.[hash].js
        }
      },
    },
  },
}

```

### Compile-Time Flags

Define environment variables at build time to strip development-only code branches. This prevents debug logging from reaching production:

```javascript
define: {
  __APP_ENV__: JSON.stringify('production'),
}

```

In your application code ([`quiz-app/src/main.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/src/main.js)), you can reference this flag:

```javascript
if (import.meta.env.PROD && __APP_ENV__ === 'production') {
  console.debug = () => {};  // Disable debug logging in production
}

```

## Implementation Guide

Update [`quiz-app/vite.config.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/vite.config.js) with the following production-ready configuration:

```javascript
// quiz-app/vite.config.js
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  // Production optimizations
  base: '/',
  build: {
    minify: 'esbuild',
    sourcemap: false,
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
      },
    },
  },
  define: {
    __APP_ENV__: JSON.stringify('production'),
  },
});

```

After updating the configuration, generate the optimized build:

```bash
npm run build

```

This command creates a `dist` folder containing minified assets, a separate `vendor` chunk, and inlined small assets ready for deployment.

## Performance Impact on the Quiz App

These optimizations deliver measurable improvements for the quiz-app:

- **Vendor chunking**: Isolates Vue 3 (~150KB gzipped) into a separate cached file. Subsequent deployments only require downloading changed application code, not the entire framework.
- **Asset inlining**: Converts small icons like `src/assets/logo.svg` into data URIs, eliminating HTTP requests for common UI elements.
- **Minification**: Reduces JavaScript size from approximately 350KB to 230KB (gzipped), significantly improving startup time on slower connections.
- **Source map removal**: Saves ~30KB by excluding debugging files unnecessary for end users.
- **CSS splitting**: Prepares the architecture for future lazy-loaded routes (such as a "Results" view), ensuring only required styles are downloaded.

## Summary

- Configure `build.minify` and `build.sourcemap` in [`quiz-app/vite.config.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/vite.config.js) to reduce bundle size and remove debugging artifacts.
- Implement `manualChunks` to separate vendor libraries like Vue into cached chunks, improving load times for returning users.
- Set `assetsInlineLimit` to 4096 bytes to inline small assets and reduce HTTP requests.
- Use `define` to inject compile-time environment flags that strip development-only code from production builds.
- Run `npm run build` to generate an optimized `dist` folder ready for deployment on Azure Static Web Apps or similar static hosting platforms.

## Frequently Asked Questions

### How do I switch from esbuild to terser for minification in the quiz-app?

Change the `build.minify` value from `'esbuild'` to `'terser'` in [`quiz-app/vite.config.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/vite.config.js). You must first install terser by running `npm add -D terser`. While terser produces slightly smaller bundles (5-10% reduction), it increases build time significantly, making esbuild preferable for most educational deployments.

### Why should I disable source maps in production builds?

Source maps add approximately 30KB to your bundle size and are only necessary for debugging purposes. Since learners running the quiz-app do not need to debug minified code, setting `build.sourcemap: false` in [`vite.config.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/vite.config.js) eliminates unnecessary bandwidth usage and slightly improves load times.

### How does manual chunking improve caching for the quiz-app?

The `manualChunks` configuration in `rollupOptions.output` forces dependencies from `node_modules` (such as Vue 3) into a separate [`vendor.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/vendor.js) file. Because vendor libraries change less frequently than application code, browsers can cache this chunk indefinitely. When you update quiz content or logic, returning users only download the smaller application chunk rather than the entire framework bundle.

### What is the optimal assetsInlineLimit for the quiz-app?

The default value of 4096 bytes (4KB) works optimally for the quiz-app. This setting converts small assets like `src/assets/logo.svg` and icon files into base64 data URIs embedded directly in your JavaScript or CSS. For assets larger than 4KB, Vite creates separate files to avoid bloating the initial bundle with excessive base64 overhead.