Compression and optimization of build output

Compression and Optimization of Build Output

Vite.js leverages native browser ESM for fast startup in development mode, but production builds still require compression and optimization of output files. Proper build output optimization can significantly improve application loading performance and reduce resource size.

File Compression Strategies

Vite uses Rollup for production builds by default, with built-in compression tools:

// vite.config.js
export default {
  build: {
    minify: 'terser', // Options: 'terser' or 'esbuild'
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
}

ESBuild compresses 20-40x faster than Terser but with slightly lower compression ratio. For scenarios requiring extreme compression:

{
  build: {
    minify: 'terser',
    target: 'es2015',
    cssTarget: 'chrome80'
  }
}

CSS Code Optimization

Vite handles CSS with automatic compression and code splitting:

/* Original CSS */
.container {
  margin: 10px 20px 10px 20px;
  display: flex;
  flex-direction: column;
}

After build, it's compressed to:

.container{margin:10px 20px;display:flex;flex-direction:column}

Advanced CSS processing through configuration:

{
  css: {
    postcss: {
      plugins: [
        require('postcss-combine-duplicated-selectors')(),
        require('postcss-sort-media-queries')()
      ]
    }
  }
}

Resource Inlining and Externalization

Inline small resources to reduce HTTP requests:

<!-- Before build -->
<img src="./assets/icon.svg" />

<!-- After build -->
<img src="data:image/svg+xml;base64,PHN2Zy..." />

Configure threshold for inlining behavior:

{
  build: {
    assetsInlineLimit: 4096 // Resources under 4KB are automatically inlined
  }
}

Conversely, large resources should be externalized:

{
  build: {
    rollupOptions: {
      external: ['lodash-es']
    }
  }
}

Code Splitting Strategies

Dynamic imports automatically trigger code splitting:

// Original code
const module = await import('./module.js')

// After build, generates separate chunk
src_module_js.js

Manual splitting configuration:

{
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
}

Deep Tree Shaking Optimization

Dead code elimination through ESM static analysis:

// utils.js
export function used() {...}
export function unused() {...}

// main.js
import { used } from './utils'

After build, the unused function is removed. For third-party libraries, ensure ESM version:

{
  resolve: {
    mainFields: ['module', 'jsnext:main', 'main']
  }
}

Pre-rendering Critical Resources

Use @vitejs/plugin-legacy to generate modern and legacy dual versions:

import legacy from '@vitejs/plugin-legacy'

{
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

Build Output Analysis

Use rollup-plugin-visualizer to analyze output:

import { visualizer } from 'rollup-plugin-visualizer'

{
  plugins: [
    visualizer({
      open: true,
      gzipSize: true
    })
  ]
}

The generated visualization report shows module size distribution, helping identify optimization points.

Cache Strategy Optimization

Generate filenames based on content hash:

{
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name].[hash].js`,
        chunkFileNames: `[name].[hash].js`,
        assetFileNames: `[name].[hash].[ext]`
      }
    }
  }
}

Output example:

assets/index.3a7b2c4d.js
assets/vendor.e5f6g7h8.css

Modern Browser Optimization

Output cleaner code for modern browsers:

{
  build: {
    target: 'esnext',
    polyfillModulePreload: false
  }
}

With module type script tag:

<script type="module" src="/assets/index.es.js"></script>

Server-Side Rendering Optimization

SSR builds require special handling:

{
  build: {
    ssr: true,
    rollupOptions: {
      input: 'src/entry-server.js'
    }
  }
}

Client build marks SSR required modules:

{
  ssr: {
    noExternal: ['react', 'react-dom']
  }
}

Performance Monitoring Integration

Inject performance markers during build:

import { defineConfig } from 'vite'
import { injectSpeedMeasure } from 'vite-plugin-speed-measure'

export default injectSpeedMeasure(
  defineConfig({
    // Regular configuration
  })
)

Output build phase timing report:

✓ built in 1.25s
• plugins vite:css - 320ms
• plugins vite:esbuild - 450ms
• plugins rollup - 480ms