Performance bottleneck identification and optimization

Performance Bottleneck Identification and Optimization

Vite.js, as a modern front-end build tool, significantly enhances the development experience with its native ES modules and on-demand compilation features. However, as project complexity increases, various performance issues may still arise. From build speed to runtime performance, systematic bottleneck identification and targeted optimization are required.

Build Phase Performance Analysis

Common bottlenecks during the build phase often occur in dependency resolution and compilation. Generate a build performance report using the vite --profile command:

vite build --profile

The generated profile.json can be loaded and analyzed in the Performance panel of Chrome Developer Tools. Typical issues include:

1. Large Dependency Handling: Such as full imports of lodash.
2. Repeated Compilation: Misconfigured monorepo dependencies.
3. Plugin Blocking: Certain plugins performing time-consuming synchronous operations.

Example optimization solution: Configure on-demand imports for lodash.

// vite.config.js
import { defineConfig } from 'vite'
import lodash from 'vite-plugin-lodash'

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

Dependency Optimization Strategies

Third-party dependencies are often the main culprits of performance issues. Vite provides explicit dependency optimization configuration:

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

For heavy dependencies like large chart libraries, dynamic imports are recommended:

const renderChart = async () => {
  const { default: HeavyChartLib } = await import('heavy-chart-lib')
  new HeavyChartLib(/* ... */)
}

Code Splitting Practices

Improper code splitting can lead to redundant code loading on the first screen. Manually control the splitting strategy via Rollup options:

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'date-fns'],
          charts: ['echarts', 'd3']
        }
      }
    }
  }
})

Dynamic route components should be used with defineAsyncComponent:

const AsyncComp = defineAsyncComponent(() =>
  import('./components/HeavyComponent.vue')
)

Static Asset Handling

Unoptimized static assets can significantly impact loading performance. Recommended configuration:

export default defineConfig({
  build: {
    assetsInlineLimit: 4096, // Inline assets under 4KB
    chunkSizeWarningLimit: 1000,
    assetsDir: 'static/[hash]'
  }
})

For SVG icons, use vite-plugin-svg-icons to convert them into sprites:

import svgLoader from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    svgLoader({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    })
  ]
})

Runtime Performance Tuning

Browser-side performance issues can be diagnosed with the following methods:

1. Long Task Detection:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn('Long task detected:', entry)
    }
  }
})
observer.observe({ entryTypes: ['longtask'] })

2. Memory Leak Detection:

window.addEventListener('load', () => {
  setInterval(() => {
    console.log(performance.memory)
  }, 5000)
})

Server-Side Rendering Optimization

Special attention is needed for SSR scenarios:

// Avoid synchronous require
export default defineConfig({
  ssr: {
    noExternal: ['react-icons'],
    external: ['fs-extra']
  }
})

Example of streaming rendering configuration:

import { renderToNodeStream } from 'vue/server-renderer'

app.use('*', (req, res) => {
  const stream = renderToNodeStream(app)
  stream.pipe(res, { end: false })
  stream.on('end', () => res.end())
})

Cache Strategy Implementation

Proper HTTP cache configuration can significantly improve secondary access performance:

// vite.config.js
export default defineConfig({
  server: {
    headers: {
      'Cache-Control': 'public, max-age=31536000'
    }
  }
})

For versioned assets, use content hashing:

build: {
  rollupOptions: {
    output: {
      assetFileNames: 'assets/[name].[hash].[ext]'
    }
  }
}

Monitoring and Continuous Optimization

Establish performance benchmarks and integrate them into the CI pipeline:

// vitest.config.js
export default defineConfig({
  test: {
    benchmark: {
      outputFile: './bench.json',
      reporters: ['default']
    }
  }
})

Use Lighthouse for automated auditing:

// package.json
{
  "scripts": {
    "audit": "lhci autorun"
  }
}

Advanced Optimization Techniques

For particularly complex projects, consider the following solutions:

1. WASM Acceleration:

import init from './compute.wasm?init'

const { exports } = await init()
exports.heavyComputation()

2. Web Workers for CPU-Intensive Tasks:

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

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

3. Virtual List Optimization for Long List Rendering:

<template>
  <VirtualList :items="largeData" :item-size="50">
    <template #default="{ item }">
      <ListItem :data="item" />
    </template>
  </VirtualList>
</template>