辣评前端性能优化与构建（十五）

// admin-vue/vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig(({ command }) => ({
  // 测试配置
  test: {
    globals: true,
    environment: 'happy-dom',
    setupFiles: ['./src/test/setup.ts'],
  },
  
  // 插件配置
  plugins: [
    vue(),
    vueJsx(),
    // 仅在开发模式启用 DevTools，避免生产构建负担
    command === 'serve' ? vueDevTools() : null,
  ].filter(Boolean),
  
  // 基础路径
  base: '/',
  
  // 路径别名
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
}))

// 开发服务器配置
server: {
  port: 5174,
  host: '0.0.0.0',
  proxy: {
    '/api': {
      target: 'http://localhost:10086',
      changeOrigin: true,
      secure: false,
    }
  }
}

// admin-vue/vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        const normalizedId = id.replace(/\\/g, '/')

        if (!normalizedId.includes('/node_modules/')) {
          return undefined
        }

        // Element Plus 按能力分组拆包：控制 chunk 数量并避免单包过大
        if (normalizedId.includes('/element-plus/')) {
          // 简化分包策略，避免循环依赖
          if (normalizedId.includes('/locale/')) {
            return 'vendor-ep-locale'
          }
          // 将所有组件合并到一个 chunk
          return 'vendor-ep-core'
        }

        // Element Plus 图标单独分包
        if (normalizedId.includes('/@element-plus/icons-vue/')) {
          return 'vendor-ep-icons'
        }

        // ... 其他分包策略
      },
    },
  },
}

manualChunks(id) {
  const normalizedId = id.replace(/\\/g, '/')

  if (!normalizedId.includes('/node_modules/')) {
    return undefined
  }

  // 1. ECharts 生态细分，避免单个图表 chunk 过大
  if (normalizedId.includes('/vue-echarts/')) {
    return 'vendor-vue-echarts'
  }
  if (normalizedId.includes('/echarts/')) {
    return 'vendor-echarts'
  }
  if (normalizedId.includes('/zrender/')) {
    return 'vendor-zrender'
  }

  // 2. html2canvas 单独分包
  if (normalizedId.includes('/html2canvas/')) {
    return 'vendor-html2canvas'
  }

  // 3. Element Plus 相关
  if (normalizedId.includes('/@element-plus/icons-vue/')) {
    return 'vendor-ep-icons'
  }
  if (normalizedId.includes('/element-plus/')) {
    if (normalizedId.includes('/locale/')) {
      return 'vendor-ep-locale'
    }
    return 'vendor-ep-core'
  }

  // 4. Vue 生态
  if (
    normalizedId.includes('/vue/') ||
    normalizedId.includes('/vue-router/') ||
    normalizedId.includes('/pinia/')
  ) {
    return 'vendor-vue'
  }

  // 5. 工具库
  if (
    normalizedId.includes('/axios/') ||
    normalizedId.includes('/js-cookie/') ||
    normalizedId.includes('/crypto-js/')
  ) {
    return 'vendor-utils'
  }

  // 6. 其他依赖
  return 'vendor-misc'
}

// 动态导入报表导出功能
const exportReport = async () => {
  const { generateReport } = await import('@/utils/report-generator')
  await generateReport(data)
}

// 动态导入高级图表
const loadAdvancedChart = async () => {
  const { AdvancedChart } = await import('@/components/charts/AdvancedChart.vue')
  return AdvancedChart
}

build: {
  outDir: 'dist',
  sourcemap: false,  // 生产环境禁用 Source Map，减少产物体积
}

build: {
  terserOptions: {
    compress: {
      drop_console: true,      // 移除 console 语句
      drop_debugger: true,     // 移除 debugger 语句
    },
  },
}

// admin-vue/src/styles/index.scss
// 使用 SCSS 变量管理样式，避免重复定义

@import './variables.scss';

// 全局样式
body {
  font-family: $font-family;
  font-size: $font-size-base;
  color: #333;
  background-color: #f5f5f5;
}

// 使用变量定义间距
.container {
  padding: $spacing-md;
  margin: $spacing-lg;
}

// 使用变量定义颜色
.button-primary {
  background-color: $primary-color;
  
  &:hover {
    background-color: $primary-hover;
  }
}

// admin-vue/src/test/setup.ts
import { config } from '@vue/test-utils'
import { vi } from 'vitest'

// 配置测试环境
config.global.mocks = {
  $t: (key: string) => key,
}

// Mock API 调用
vi.mock('@/api/comment', () => ({
  getComments: vi.fn(() => Promise.resolve([])),
}))

// 监控首屏加载时间
const measurePerformance = () => {
  const perfData = window.performance.timing
  const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart
  const connectTime = perfData.responseEnd - perfData.requestStart
  const renderTime = perfData.domComplete - perfData.domLoading
  
  console.log(`页面加载时间: ${pageLoadTime}ms`)
  console.log(`服务器响应时间: ${connectTime}ms`)
  console.log(`DOM 渲染时间: ${renderTime}ms`)
}

// 在应用启动时调用
if (import.meta.env.PROD) {
  window.addEventListener('load', measurePerformance)
}

// 监控组件渲染性能
import { performance } from 'perf_hooks'

const measureComponentRender = (componentName: string) => {
  const startTime = performance.now()
  
  // 组件渲染逻辑
  
  const endTime = performance.now()
  const renderTime = endTime - startTime
  
  if (renderTime > 100) {
    console.warn(`${componentName} 渲染耗时过长: ${renderTime}ms`)
  }
}

// 问题：Element Plus 样式与自定义样式冲突
// 解决：使用 CSS 变量覆盖 Element Plus 主题

:root {
  --el-color-primary: #5d6bf7;
  --el-color-primary-light-3: #e8ebff;
  --el-color-primary-light-5: #d4deff;
  --el-color-primary-light-7: #c0d1ff;
  --el-color-primary-light-8: #adc4ff;
  --el-color-primary-light-9: #9ab7ff;
}

// 问题：ECharts 实例未正确销毁导致内存泄漏
// 解决：在组件卸载时销毁 ECharts 实例

import { onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

export default {
  setup() {
    let chartInstance: echarts.ECharts | null = null

    const initChart = () => {
      const dom = document.getElementById('chart')
      chartInstance = echarts.init(dom)
      chartInstance.setOption(option)
    }

    onBeforeUnmount(() => {
      if (chartInstance) {
        chartInstance.dispose()
        chartInstance = null
      }
    })

    return { initChart }
  }
}

// 问题：渲染大量列表项导致性能下降
// 解决：使用虚拟滚动

import { ElVirtualList } from 'element-plus'

export default {
  components: {
    ElVirtualList,
  },
  setup() {
    const items = ref(Array.from({ length: 10000 }, (_, i) => ({
      id: i,
      name: `Item ${i}`,
    })))

    return { items }
  }
}