Performance monitoring and measurement methods

Vite.js, as a modern front-end build tool, excels in its extremely fast development server startup and efficient hot module replacement (HMR) mechanism. However, as project scale grows, performance issues may gradually emerge, requiring systematic optimization strategies and monitoring methods to ensure a smooth user experience.

Performance Optimization Strategies

Dependency Pre-Bundling Optimization

Vite pre-bundles dependencies (node_modules) by default, but manual configuration allows finer control:

// vite.config.js
export default {
  optimizeDeps: {
    include: ['lodash/debounce', 'axios'],
    exclude: ['vue-demi']
  }
}

By precisely controlling included/excluded dependencies, unnecessary build time can be reduced. For monorepo projects, enabling optimizeDeps.auto enables smarter dependency discovery.

Advanced Code Splitting

Dynamic imports combined with custom chunking strategies significantly improve loading performance:

// Route-level dynamic import
const UserProfile = () => import('./views/UserProfile.vue')

// vite.config.js chunking configuration
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('echarts')) return 'echarts'
          if (id.includes('three')) return 'threejs'
        }
      }
    }
  }
}

Real-world tests show that separately chunking third-party libraries larger than 50KB can reduce main bundle size by over 30%.

Resource Handling Techniques

Automatic conversion to modern image formats drastically reduces asset size:

export default {
  build: {
    assetsInlineLimit: 4096, // Files under 4KB converted to base64
    polyfillModulePreload: false // Disable polyfills unnecessary for modern browsers
  },
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      webp: { quality: 75 }
    })
  ]
}

When used with vite-plugin-imagemin, WebP images typically reduce volume by 60-70% compared to original PNGs.

Performance Monitoring System

Build-Time Metrics Collection

Integrate rollup-plugin-visualizer to generate build analysis reports:

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

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

This plugin generates interactive charts with key metrics:

• Module size distribution
• Gzip/Brotli compressed sizes
• Duplicate dependency detection

Runtime Performance Measurement

Use Navigation Timing API to capture real user metrics:

const measure = () => {
  const [entry] = performance.getEntriesByType('navigation')
  console.table({
    DNSQuery: entry.domainLookupEnd - entry.domainLookupStart,
    TCPConnection: entry.connectEnd - entry.connectStart,
    TTFB: entry.responseStart - entry.requestStart,
    FullLoad: entry.loadEventEnd - entry.startTime
  })
}
window.addEventListener('load', measure)

Key metric thresholds:

• TTFB (Time To First Byte) > 500ms requires server response optimization
• DOMContentLoaded > 2s requires critical rendering path optimization

Continuous Monitoring Solution

Configure vite-plugin-pwa with Workbox for offline metric collection:

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      workbox: {
        runtimeCaching: [
          {
            urlPattern: /\/api\/analytics/,
            handler: 'NetworkOnly'
          }
        ]
      }
    })
  ]
}

// sw.js performance data reporting
const reportMetrics = (metric) => {
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify(metric)
  })
}

Advanced Debugging Techniques

Memory Analysis

Use Chrome DevTools Memory panel with vite-plugin-inspect:

vite --profile

After generating CPU flame graphs, focus on:

1. Repeated module instantiation
2. Oversized closure scopes
3. Uncleaned event listeners

Component-Level Performance Tracing

Use vite-plugin-react-profiler to identify rendering bottlenecks:

import { unstable_trace as trace } from 'scheduler/tracing'

function ExpensiveComponent() {
  trace('render', performance.now(), () => {
    // Component rendering logic
  })
}

Output includes:

• Component mount/update timeline
• Child component update cause tracing
• Immutable data warnings

Build Environment Tuning

Multi-Environment Configuration

Switch optimization strategies based on environment variables:

// vite.config.js
export default ({ mode }) => {
  const isProd = mode === 'production'
  
  return {
    esbuild: {
      drop: isProd ? ['console', 'debugger'] : []
    },
    build: {
      minify: isProd ? 'terser' : false,
      sourcemap: isProd ? 'hidden' : 'inline'
    }
  }
}

Compiler Parameter Adjustment

Target modern browsers with specific configurations:

export default {
  build: {
    target: 'es2020',
    polyfill: false,
    cssTarget: 'chrome85'
  }
}

This configuration reduces output code size by approximately 15% while avoiding unnecessary polyfill injection.