Configuration tips for modern builds

Core Concepts of Performance Optimization and Modern Builds

Vite.js, as a next-generation frontend build tool, leverages native browser ESM features to deliver a fast development experience. Performance optimization should be considered from two dimensions: development and production environments:

1. Development: Utilize ESM's on-demand compilation feature
2. Production: Rollup-based bundling optimizations

Development Environment Optimization Configuration

Dependency Pre-Bundling Strategy

Vite pre-bundles node_modules by default, but finer control can be achieved via configuration:

// vite.config.js  
export default defineConfig({  
  optimizeDeps: {  
    include: ['lodash-es', 'axios'],  
    exclude: ['vue-demi'],  
    force: true // Force re-pre-bundling  
  }  
})  

Hot Module Replacement (HMR) Optimization

Custom HMR logic can improve update speed in large projects:

if (import.meta.hot) {  
  import.meta.hot.accept('./module.js', (newModule) => {  
    console.log('Module updated:', newModule)  
    // Custom update logic  
  })  
}  

Production Build Optimization

Code Splitting Strategy

export default defineConfig({  
  build: {  
    rollupOptions: {  
      output: {  
        manualChunks: (id) => {  
          if (id.includes('node_modules')) {  
            if (id.includes('lodash')) {  
              return 'lodash'  
            }  
            if (id.includes('d3')) {  
              return 'd3'  
            }  
            return 'vendor'  
          }  
        }  
      }  
    }  
  }  
})  

Asset Compression Configuration

import { defineConfig } from 'vite'  
import viteCompression from 'vite-plugin-compression'  

export default defineConfig({  
  plugins: [  
    viteCompression({  
      algorithm: 'brotliCompress',  
      ext: '.br'  
    })  
  ]  
})  

Advanced Optimization Techniques

On-Demand Component Loading

Optimization example for UI libraries:

// vite.config.js  
import Components from 'unplugin-vue-components/vite'  
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'  

export default defineConfig({  
  plugins: [  
    Components({  
      resolvers: [  
        ElementPlusResolver({  
          importStyle: 'sass'  
        })  
      ]  
    })  
  ]  
})  

WASM Optimization

export default defineConfig({  
  optimizeDeps: {  
    exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']  
  },  
  plugins: [  
    wasmPack(['./crate-1', './crate-2'])  
  ]  
})  

Cache Strategy Optimization

File Fingerprinting Configuration

export default defineConfig({  
  build: {  
    rollupOptions: {  
      output: {  
        assetFileNames: 'assets/[name]-[hash][extname]',  
        chunkFileNames: 'js/[name]-[hash].js',  
        entryFileNames: 'js/[name]-[hash].js'  
      }  
    }  
  }  
})  

Persistent Cache Configuration

export default defineConfig({  
  cacheDir: './.vite_cache',  
  build: {  
    manifest: true  
  }  
})  

Modern Build Features

Using Top-Level Await

// Directly use top-level await  
const data = await fetchData()  
export default { data }  

Worker Thread Optimization

// worker.js  
self.onmessage = (e) => {  
  const result = heavyCalculation(e.data)  
  self.postMessage(result)  
}  

// Main thread  
const worker = new Worker(new URL('./worker.js', import.meta.url))  

Build Analysis Tool Integration

Visualization Plugin

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

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

Custom Report Generation

import { defineConfig } from 'vite'  
import { execSync } from 'child_process'  

export default defineConfig({  
  plugins: [  
    {  
      name: 'generate-report',  
      closeBundle() {  
        execSync('npx vite-bundle-analyzer report.html')  
      }  
    }  
  ]  
})  

Environment Variables and Mode Optimization

Smart Environment Variable Handling

// vite.config.js  
export default defineConfig({  
  define: {  
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),  
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)  
  }  
})  

Multi-Environment Configuration Strategy

// vite.config.js  
export default defineConfig(({ mode }) => {  
  const env = loadEnv(mode, process.cwd(), '')  
    
  return {  
    define: {  
      'process.env.API_BASE': JSON.stringify(env.API_BASE)  
    }  
  }  
})  

Server-Side Rendering (SSR) Optimization

SSR Build Configuration

export default defineConfig({  
  build: {  
    ssr: true,  
    rollupOptions: {  
      input: 'src/entry-server.js'  
    }  
  }  
})  

Client Hydration Configuration

export default defineConfig({  
  ssr: {  
    noExternal: ['react-router-dom'],  
    external: ['aws-sdk']  
  }  
})  

Image and Static Asset Handling

Image Compression Strategy

import viteImagemin from 'vite-plugin-imagemin'  

export default defineConfig({  
  plugins: [  
    viteImagemin({  
      gifsicle: { optimizationLevel: 7 },  
      optipng: { optimizationLevel: 7 }  
    })  
  ]  
})  

SVG Component Handling

import svgLoader from 'vite-svg-loader'  

export default defineConfig({  
  plugins: [svgLoader()]  
})  

Modern JavaScript Support

Browser Compatibility Configuration

export default defineConfig({  
  build: {  
    target: ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']  
  }  
})  

On-Demand Polyfill Loading

import legacy from '@vitejs/plugin-legacy'  

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

Build Performance Monitoring

Build Time Analysis

export default defineConfig({  
  plugins: [  
    {  
      name: 'build-time',  
      configResolved(config) {  
        console.time('Build Time')  
      },  
      closeBundle() {  
        console.timeEnd('Build Time')  
      }  
    }  
  ]  
})  

Memory Usage Monitoring

export default defineConfig({  
  plugins: [  
    {  
      name: 'memory-usage',  
      buildStart() {  
        if (process.env.NODE_ENV === 'production') {  
          setInterval(() => {  
            const used = process.memoryUsage().heapUsed / 1024 / 1024  
            console.log(`Memory Usage: ${Math.round(used * 100) / 100} MB`)  
          }, 5000)  
        }  
      }  
    }  
  ]  
})