Vue3+Vite组合拳出击：从首屏卡顿到丝滑体验——一次性能优化实战日志

// vite.config.js 核心配置
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'element-plus': ['node_modules/element-plus/lib/index.css'],
          'echarts': ['node_modules/echarts/dist/echarts.simple.min.js']
        }
      }
    }
  },
  optimizeDeps: {
    include: ['lodash-es'] // 预编译常用方法集
  }
}

<!-- App.vue -->
<template>
  <Suspense>
    <RouterView />
    <template #fallback>
      <LoadingSkeleton />
    </template>
  </Suspense>
</template>

<!-- UserList.vue -->
<script setup>
const props = defineProps<{ activeTab: string }>()
// 根据当前激活标签动态加载子组件
const ChildComponent = defineAsyncComponent(() => {
  if (props.activeTab === 'list') import('./UserTable.vue')
  else import('./UserForm.vue')
})
</script>

// heavyCalculation.worker.ts
self.onmessage = function(e) {
  const { data, algorithm } = e.data
  // 执行CPU密集型计算
  const result = performComplexCalculation(data, algorithm)
  postMessage(result)
}

// 父线程调用
const worker = new Worker(new URL('./heavyCalculation.worker.ts', import.meta.url))
worker.postMessage({ data: largeDataset, algorithm: 'md5' })
worker.onmessage = (event) => {
  updateUI(event.data) // 仅负责更新DOM
}

flowchart LR
    A[优化前] --> B[主线程忙碌: 3.2s]
    A --> C[FID: 45ms]
    A --> D[CLS: 0.5]
    E[优化后] --> F[主线程忙碌: 0.8s]
    E --> G[FID: 12ms]
    E --> H[CLS: 0.1]