docs: Add benchmark analysis and visualization components

.scripts/generate-benchmark.mjs

@@ -0,0 +1,113 @@
+import { exec } from 'child_process';
+import fs from 'fs/promises';
+import os from 'os';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { promisify } from 'util';
+
+const funcNames = [
+  'omit',
+  'pick',
+  'differenceWith',
+  'difference',
+  'intersectionWith',
+  'intersection',
+  'unionBy',
+  'union',
+  'dropRightWhile',
+  'groupBy',
+];
+
+const execAsync = promisify(exec);
+
+const filename = fileURLToPath(import.meta.url);
+const ROOT = path.resolve(path.dirname(filename), '..');
+const TEMP_DIR = path.join(ROOT, '.temp');
+const OUT_JSON = path.join(ROOT, 'docs', 'data', 'benchmark-results.json');
+
+async function main() {
+  await fs.mkdir(TEMP_DIR, { recursive: true });
+  await fs.mkdir(path.dirname(OUT_JSON), { recursive: true });
+
+  const packageJsonPath = path.join(ROOT, 'package.json');
+  const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
+
+  let lodashVersion = 'unknown';
+  try {
+    const lodashPkgPath = path.join(ROOT, 'node_modules', 'lodash', 'package.json');
+    const lodashContent = await fs.readFile(lodashPkgPath, 'utf8');
+    const lodashJson = JSON.parse(lodashContent);
+    lodashVersion = lodashJson.version;
+  } catch {
+    console.warn('Could not detect lodash version, using "unknown"');
+  }
+  const cpus = os.cpus();
+  const totalMemoryGB = (os.totalmem() / 1024 ** 3).toFixed(2);
+
+  const allResults = {
+    labels: {
+      esToolkit: `es-toolkit@${packageJson.version}`,
+      lodash: `lodash@${lodashVersion}`,
+    },
+    environment: {
+      node: process.version,
+      platform: `${os.platform()} ${os.arch()}`,
+      cpu: cpus[0]?.model || 'Unknown',
+      cpuCores: cpus.length,
+      memory: `${totalMemoryGB} GB`,
+    },
+    data: {},
+  };
+
+  for (const funcName of funcNames) {
+    const benchFile = `benchmarks/performance/${funcName}.bench.ts`;
+    const tempJsonPath = path.join(TEMP_DIR, `${funcName}.json`);
+
+    console.log(`Running benchmark: ${funcName}`);
+
+    try {
+      await execAsync(`yarn vitest bench ${benchFile} --run --reporter=default --outputJson=${tempJsonPath}`, {
+        cwd: ROOT,
+        maxBuffer: 1024 * 1024 * 10,
+      });
+
+      const rawData = await fs.readFile(tempJsonPath, 'utf8');
+      const benchData = JSON.parse(rawData);
+
+      const funcData = {};
+
+      if (benchData.files && benchData.files.length > 0) {
+        for (const file of benchData.files) {
+          if (file.groups && file.groups.length > 0) {
+            const firstGroup = file.groups[0];
+            for (const bench of firstGroup.benchmarks || []) {
+              // skip compatibility benchmarks
+              if (bench.name.includes('compat')) {
+                continue;
+              }
+
+              if (bench.name.includes('lodash')) {
+                funcData.lodash = Math.round(bench.hz);
+              } else if (bench.name.includes('es-toolkit')) {
+                funcData.esToolkit = Math.round(bench.hz);
+              }
+            }
+          }
+        }
+      }
+
+      allResults.data[funcName] = funcData;
+
+      await fs.unlink(tempJsonPath);
+
+      console.log(`✓ ${funcName} completed\n`);
+    } catch (error) {
+      console.error(`✗ Failed to run benchmark for ${funcName}:`, error.message);
+      allResults.data[funcName] = { error: error.message };
+    }
+  }
+
+  await fs.writeFile(OUT_JSON, JSON.stringify(allResults, null, 2), 'utf8');
+}
+
+main();

docs/.vitepress/components/BenchmarkChart.vue

@@ -0,0 +1,95 @@
+<template>
+  <div :style="{ width: '100%', height: computedHeight + 'px' }">
+    <Bar :data="chartData" :options="options" />
+  </div>
+</template>
+
+<script setup>
+import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
+import { Bar } from 'vue-chartjs';
+import data from '../../data/benchmark-results.json';
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
+const labels = Object.keys(data.data || {});
+const seriesKeys = Object.keys(data.labels || {});
+
+const PALETTE = [
+  { bg: 'rgba(59,130,246,0.9)', border: 'rgba(59,130,246,1)' },
+  { bg: 'rgba(239,68,68,0.9)', border: 'rgba(239,68,68,1)' },
+  { bg: 'rgba(16,185,129,0.9)', border: 'rgba(16,185,129,1)' },
+  { bg: 'rgba(249,115,22,0.9)', border: 'rgba(249,115,22,1)' },
+];
+
+const rowHeight = 48;
+const minHeight = 200;
+const extraPadding = 40;
+const computedHeight = Math.max(minHeight, labels.length * rowHeight + extraPadding);
+
+const datasets = seriesKeys.map((key, idx) => {
+  const values = labels.map(fn => (data.data[fn] && Number(data.data[fn][key]) / 1000000) || 0);
+  const color = PALETTE[idx % PALETTE.length];
+  return {
+    label: data.labels[key] || key,
+    data: values,
+    backgroundColor: color.bg,
+    borderColor: color.border,
+    borderWidth: 0,
+    barThickness: 18,
+  };
+});
+
+const chartData = {
+  labels,
+  datasets,
+};
+
+const options = {
+  indexAxis: 'y',
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: {
+    duration: 0,
+  },
+  interaction: {
+    mode: 'nearest',
+    intersect: true,
+  },
+  plugins: {
+    title: {
+      display: false,
+    },
+    legend: {
+      display: true,
+      position: 'top',
+      align: 'center',
+    },
+    tooltip: {
+      enabled: true,
+      mode: 'nearest',
+      intersect: true,
+      position: 'nearest',
+    },
+  },
+  scales: {
+    x: {
+      beginAtZero: true,
+      ticks: {
+        precision: 0,
+      },
+      grid: {
+        display: true,
+        drawBorder: false,
+      },
+      title: {
+        display: true,
+        text: 'of executions (millions)',
+      },
+    },
+    y: {
+      grid: {
+        display: false,
+      },
+    },
+  },
+};
+</script>

docs/.vitepress/components/BenchmarkEnvironment.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="benchmark-environment">
+    <div v-if="hasEnvironment" class="env-info">
+      <div class="env-title">{{ text.prefix }}</div>
+      <div class="env-details">
+        <div class="env-item">
+          <span class="env-label">{{ text.cpu }}:</span>
+          <span class="env-value">{{ cpuInfo }}</span>
+        </div>
+        <div class="env-item">
+          <span class="env-label">{{ text.memory }}:</span>
+          <span class="env-value">{{ memoryInfo }}</span>
+        </div>
+        <div class="env-item">
+          <span class="env-label">{{ text.node }}:</span>
+          <span class="env-value">{{ nodeVersion }}</span>
+        </div>
+        <div class="env-item">
+          <span class="env-label">{{ text.platform }}:</span>
+          <span class="env-value">{{ platformInfo }}</span>
+        </div>
+      </div>
+    </div>
+    <p v-else>
+      {{ text.loading }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { useData } from 'vitepress';
+import { computed } from 'vue';
+import raw from '../../data/benchmark-results.json';
+
+const { lang } = useData();
+
+const i18n = {
+  'en-US': {
+    prefix: 'Test Environment',
+    loading: 'Loading environment information...',
+    cores: 'cores',
+    cpu: 'CPU',
+    memory: 'Memory',
+    node: 'Node.js',
+    platform: 'Platform',
+  },
+  zh_hans: {
+    prefix: '测试环境',
+    loading: '测试环境信息加载中...',
+    cores: '核',
+    cpu: 'CPU',
+    memory: '内存',
+    node: 'Node.js',
+    platform: '平台',
+  },
+  ja: {
+    prefix: 'テスト環境',
+    loading: 'テスト環境情報を読み込み中...',
+    cores: 'コア',
+    cpu: 'CPU',
+    memory: 'メモリ',
+    node: 'Node.js',
+    platform: 'プラットフォーム',
+  },
+  ko: {
+    prefix: '테스트 환경',
+    loading: '테스트 환경 정보를 불러오는 중...',
+    cores: '코어',
+    cpu: 'CPU',
+    memory: '메모리',
+    node: 'Node.js',
+    platform: '플랫폼',
+  },
+};
+
+const text = computed(() => {
+  return i18n[lang.value] || i18n['en-US'];
+});
+
+const environment = raw.environment || {};
+
+const hasEnvironment = computed(() => {
+  return environment.cpu || environment.node;
+});
+
+const cpuInfo = computed(() => {
+  if (!environment.cpu) return '';
+  const cores = environment.cpuCores ? ` (${environment.cpuCores} ${text.value.cores})` : '';
+  return `${environment.cpu}${cores}`;
+});
+
+const memoryInfo = computed(() => {
+  return environment.memory || '';
+});
+
+const nodeVersion = computed(() => {
+  return environment.node || '';
+});
+
+const platformInfo = computed(() => {
+  return environment.platform || '';
+});
+</script>
+
+<style scoped>
+.benchmark-environment {
+  margin: 1.5em 0;
+}
+
+.env-info {
+  background-color: var(--vp-code-block-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px 20px;
+}
+
+.env-title {
+  font-weight: 600;
+  font-size: 0.95em;
+  margin-bottom: 12px;
+  color: var(--vp-c-text-1);
+}
+
+.env-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.env-item {
+  display: flex;
+  font-size: 0.9em;
+  line-height: 1.6;
+}
+
+.env-label {
+  color: var(--vp-c-text-2);
+  min-width: 90px;
+}
+
+.env-value {
+  color: var(--vp-c-text-1);
+  font-family: var(--vp-font-family-mono);
+  flex: 1;
+}
+</style>