The use of analytical tool construction

The Necessity of Performance Optimization and Build Analysis Tools

Modern frontend projects are becoming increasingly complex, and the code volume generated by build tools directly impacts user experience. While Vite.js, as a next-generation build tool, offers fast startup in development environments, production builds still require attention to performance optimization. Build analysis tools can visually display bundling results, helping developers identify optimization opportunities.

Common Build Analysis Tools

Rollup Plugin Visualizer

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

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

This plugin generates an interactive treemap showing the size distribution of modules. The gzipSize and brotliSize options display compressed sizes, which are closer to actual transfer volumes.

Webpack Bundle Analyzer

Although Vite is based on Rollup, it is compatible with some Webpack ecosystem tools:

import { defineConfig } from 'vite'  
import analyzer from 'webpack-bundle-analyzer'  

export default defineConfig({  
  build: {  
    rollupOptions: {  
      plugins: [  
        analyzer.bundleAnalyzerPlugin()  
      ]  
    }  
  }  
})  

This launches a local server displaying a sunburst chart, particularly useful for analyzing multi-entry projects.

In-Depth Build Artifact Analysis

Using source-map-explorer

npm install source-map-explorer --save-dev  

Add a script to package.json:

{  
  "scripts": {  
    "analyze": "vite build && source-map-explorer dist/assets/*.js"  
  }  
}  

Running this generates a line-by-line volume analysis, pinpointing exactly which code segments contribute to bloat.

Custom Analysis Script

// analyze.js  
import fs from 'fs'  
import path from 'path'  

const stats = JSON.parse(fs.readFileSync('./dist/stats.json'))  
const modules = stats.modules  
  .sort((a, b) => b.size - a.size)  
  .slice(0, 10)  

console.table(modules)  

Combine this with Rollup's generateBundle hook to output custom statistics.

Optimization Strategies in Practice

Code Splitting Configuration

// vite.config.js  
export default defineConfig({  
  build: {  
    rollupOptions: {  
      output: {  
        manualChunks(id) {  
          if (id.includes('node_modules')) {  
            if (id.includes('lodash')) {  
              return 'lodash'  
            }  
            if (id.includes('moment')) {  
              return 'moment'  
            }  
            return 'vendor'  
          }  
        }  
      }  
    }  
  }  
})  

Manually splitting large dependencies into separate chunks leverages browser caching.

On-Demand Loading Example

// Original approach  
import _ from 'lodash'  

// Optimized approach  
const debounce = await import('lodash/debounce')  

Using dynamic imports reduces initial load volume.

Advanced Analysis Techniques

Comparing Different Build Versions

npx vite-bundle-diff v1.0.0 v2.0.0  

This tool compares volume changes between versions, identifying new dependencies.

Performance Budget Configuration

// vite.config.js  
import { defineConfig } from 'vite'  
import { performanceBudget } from 'vite-plugin-performance-budget'  

export default defineConfig({  
  plugins: [  
    performanceBudget({  
      budgets: [  
        {  
          type: 'js',  
          budget: 500 * 1024 // 500KB  
        }  
      ]  
    })  
  ]  
})  

Fails the build if the total JS volume exceeds the threshold, enforcing optimization.

Visual Monitoring Solutions

Integrating into CI Pipelines

# .github/workflows/analyze.yml  
name: Bundle Analysis  
on: push  
jobs:  
  analyze:  
    runs-on: ubuntu-latest  
    steps:  
      - uses: actions/checkout@v2  
      - run: npm ci  
      - run: npm run build  
      - uses: relative-ci/compare-action@v1  
        with:  
          buildScript: npm run build  
          outputDir: dist  

Automatically generates comparison reports with each commit.

Using Lighthouse CI

npx @lhci/cli collect --url=https://your-site.com  
npx @lhci/cli upload --target=filesystem  

Generates comprehensive performance scores, including analysis of how build artifacts affect real-world performance.