性能监控与度量方法

Vite.js 作为现代前端构建工具，其核心优势在于极快的开发服务器启动速度和高效的热更新机制。但随着项目规模增长，性能问题可能逐渐显现，需要系统化的优化手段和监控方法确保用户体验。

性能优化策略

依赖预构建优化

Vite 默认会预构建依赖项（node_modules），但可以通过手动配置细化控制：

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

通过精准控制包含/排除的依赖项，可以减少不必要的构建时间。对于 monorepo 项目，可以启用 optimizeDeps.auto 实现更智能的依赖发现。

代码分割进阶

动态导入结合自定义分包策略能显著提升加载性能：

// 路由级动态导入
const UserProfile = () => import('./views/UserProfile.vue')

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

实测表明，对超过 50KB 的第三方库进行单独分包可降低主包体积 30% 以上。

资源处理技巧

现代图像格式的自动转换能大幅减少资源体积：

export default {
  build: {
    assetsInlineLimit: 4096, // 4KB以下文件转base64
    polyfillModulePreload: false // 禁用现代浏览器不需要的polyfill
  },
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      webp: { quality: 75 }
    })
  ]
}

配合 vite-plugin-imagemin 使用时，WebP 格式图片通常比原 PNG 体积减少 60-70%。

性能监控体系

构建时指标采集

集成 rollup-plugin-visualizer 可生成构建分析报告：

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

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

该插件会生成包含以下关键指标的交互式图表：

• 各模块体积占比
• Gzip/Brotli 压缩后大小
• 重复依赖检测

运行时性能度量

使用 Navigation Timing API 获取真实用户数据：

const measure = () => {
  const [entry] = performance.getEntriesByType('navigation')
  console.table({
    DNS查询: entry.domainLookupEnd - entry.domainLookupStart,
    TCP连接: entry.connectEnd - entry.connectStart,
    TTFB: entry.responseStart - entry.requestStart,
    完全加载: entry.loadEventEnd - entry.startTime
  })
}
window.addEventListener('load', measure)

关键指标说明：

• TTFB (Time To First Byte) > 500ms 需检查服务端响应
• DOMContentLoaded > 2s 需优化关键渲染路径

持续监控方案

配置 vite-plugin-pwa 配合 Workbox 实现离线指标收集：

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

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

// sw.js 中添加性能数据上报
const reportMetrics = (metric) => {
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify(metric)
  })
}

高级调试手段

内存分析

使用 Chrome DevTools 的 Memory 面板配合 vite-plugin-inspect：

vite --profile

生成 CPU 火焰图后重点关注：

1. 重复的模块实例化
2. 过大的闭包作用域
3. 未清理的事件监听器

组件级性能追踪

通过 vite-plugin-react-profiler 定位渲染瓶颈：

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

function ExpensiveComponent() {
  trace('render', performance.now(), () => {
    // 组件渲染逻辑
  })
}

输出结果包含：

• 组件挂载/更新时间线
• 子组件更新原因追踪
• 不可变数据警告

构建环境调优

多环境差异化配置

根据环境变量切换优化策略：

// 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'
    }
  }
}

编译器参数调整

针对现代浏览器配置目标环境：

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

此配置可使输出代码体积减少约 15%，同时避免不必要的 polyfill 注入。