Cómo reducir un paquete de panel pesado de Recharts usando TanStack Charts
TuBrief 편집팀
2026년 8월 12일
0
Computing/Software원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
Si entras a una página de panel y ves un reloj de arena girando solo para cargar los gráficos, es muy probable que sea un problema de Recharts. Ver que el tamaño del paquete aumenta en cientos de kilobytes solo por agregar un par de gráficos hace suspirar a cualquiera. Recharts está demasiado vinculado al ciclo de reconciliación de React DOM. La estructura de la interfaz de usuario y el procesamiento de datos están tan entrelazados que resulta difícil usarlos de manera ligera.
En estos casos, TanStack Charts se convierte en una buena alternativa. Separa la lógica de visualización en un núcleo basado en gramática gráfica. Mientras que Recharts suele consumir más de 150 KiB, TanStack Charts ronda los 40 KiB. El tamaño del paquete se reduce en casi un 70%.
El problema es la migración del código de producción. Deshacer una pantalla que funciona bien siempre genera dudas. Se necesita un orden claro para convencer a los miembros del equipo y realizar la transición sin fallas.
Intentar cambiar todo de una vez hace que sea difícil encontrar dónde falló algo. Debes tomar un componente y dividirlo exactamente en 4 pasos para avanzar.
marks del objeto de declaración defineChart.ResponsiveContainer y Tooltip por el escalador automático de TanStack y el módulo @tanstack/charts/tooltip.useMemo y pásalo al componente principal Chart.Siguiendo este orden, puedes reducir a la mitad el tiempo necesario para reemplazar el primer componente de gráfico.
`typescript
import React, { useMemo } from 'react';
import { defineChart, lineY, dot } from '@tanstack/charts';
import { scaleBand } from '@tanstack/charts/scales/band';
import { scaleLinear } from '@tanstack/charts/scales/linear';
import { tooltip } from '@tanstack/charts/tooltip';
import { Chart } from '@tanstack/charts/react';
interface DataRow {
date: string;
value: number;
}
export function MigratedRevenueChart({ data }: { data: DataRow[] }) {
const definition = useMemo(() => {
return defineChart({
marks: [
lineY(data, {
x: 'date',
y: 'value',
stroke: 'var(--ts-chart-1, #2563eb)',
strokeWidth: 2,
}),
dot(data, {
x: 'date',
y: 'value',
fill: 'var(--ts-chart-1, #2563eb)',
r: 4,
}),
],
x: {
scale: () => scaleBand().padding(0.2),
},
y: {
scale: scaleLinear,
nice: true,
grid: true,
},
tooltip: {
use: tooltip,
className: 'custom-tooltip',
},
});
}, [data]);
return (
<div style={{ width: '100%', height: 300 }}>
);
}
`
Es poco elegante que todo el componente del gráfico se vuelva a dibujar cada vez que se alterna el modo oscuro. TanStack Charts admite de forma nativa propiedades personalizadas de CSS y currentColor en lugar de valores de color codificados de forma rígida.
En lugar de gestionar los colores de los gráficos como estado de JavaScript, introdúcelos mediante variables CSS. Solo haz que la paleta predeterminada del gráfico haga referencia desde --ts-chart-1 hasta --ts-chart-6.
[data-theme='dark'].var(--ts-chart-1) en stroke o fill dentro de las opciones de defineChart.Si lo configuras así, cuando un diseñador te pida cambiar los colores de los gráficos, no tendrás que tocar los archivos TSX. Modificar solo el CSS será suficiente.
`css
:root {
--bg-chart-card: #ffffff;
--text-chart-main: #172033;
--border-chart-grid: #e2e8f0;
--ts-chart-1: #2563eb;
--ts-chart-2: #f97316;
}
[data-theme='dark'] {
--bg-chart-card: #0f172a;
--text-chart-main: #f8fafc;
--border-chart-grid: #334155;
--ts-chart-1: #60a5fa;
--ts-chart-2: #fb923c;
}
.custom-tooltip {
background-color: var(--bg-chart-card);
color: var(--text-chart-main);
border: 1px solid var(--border-chart-grid);
padding: 8px 12px;
border-radius: 6px;
}
`
Si renderizas 100 000 puntos como SVG, se generarán 100 000 nodos DOM. El hilo del navegador no podrá soportarlo. La ralentización es evidente.
La solución consiste en combinar dos cosas: cambiar al renderizador de Canvas para eliminar el costo de creación del DOM, y comprimir los datos que están densamente empaquetados sin sentido más allá del ancho de píxel de la pantalla utilizando el algoritmo LTTB (Largest Triangle Three Buckets). LTTB reduce la cantidad de puntos mientras preserva las características principales (valores máximos y mínimos) de los datos.
`typescript
export function lttbDownsample(
data: T[],
xAccessor: (d: T) => number,
yAccessor: (d: T) => number,
threshold: number
): T[] {
const dataLength = data.length;
if (threshold >= dataLength || threshold === 0) return data;
const sampled: T[] = [];
let sampledIndex = 0;
const bucketSize = (dataLength - 2) / (threshold - 2);
sampled[sampledIndex++] = data[0];
for (let i = 0; i < threshold - 2; i++) {
let avgX = 0;
let avgY = 0;
const avgRangeStart = Math.floor((i + 1) * bucketSize) + 1;
const avgRangeEnd = Math.floor((i + 2) * bucketSize) + 1;
const currentAvgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
for (let j = avgRangeStart; j < currentAvgRangeEnd; j++) {
avgX += xAccessor(data[j]);
avgY += yAccessor(data[j]);
}
avgX /= (currentAvgRangeEnd - avgRangeStart);
avgY /= (currentAvgRangeEnd - avgRangeStart);
const rangeOffs = Math.floor((i + 0) * bucketSize) + 1;
const rangeTo = Math.floor((i + 1) * bucketSize) + 1;
const pointAX = xAccessor(sampled[sampledIndex - 1]);
const pointAY = yAccessor(sampled[sampledIndex - 1]);
let maxArea = -1;
let maxAreaPointIndex = rangeOffs;
for (let j = rangeOffs; j < rangeTo; j++) {
const area = Math.abs(
(pointAX - avgX) * (yAccessor(data[j]) - pointAY) -
(pointAX - xAccessor(data[j])) * (avgY - pointAY)
) * 0.5;
if (area > maxArea) {
maxArea = area;
maxAreaPointIndex = j;
}
}
sampled[sampledIndex++] = data[maxAreaPointIndex];
}
sampled[sampledIndex++] = data[dataLength - 1];
return sampled;
}
`
Cuando trates con series temporales de gran volumen, reduce los datos a un nivel de unos 1000 usando LTTB. Luego, activa la opción spatialIndex: true para disminuir la complejidad de detección del puntero del ratón. Finalmente, adjunta el renderizador de Canvas del paquete @tanstack/charts/react/canvas para alcanzar los 60 fps.
En formatos como Recharts donde las etiquetas JSX están profundamente anidadas, los asistentes de IA tienden a generar alucinaciones con facilidad. Inventan propiedades extrañas o dejan etiquetas abiertas sin cerrar.
Las bibliotecas escritas con un formato de declaración de objetos como TanStack Charts permiten que la IA extraiga código de manera limpia siempre que se le proporcione un buen esquema de tipos. Define un tipo de esquema como el siguiente en tu proyecto e inclúyelo en el archivo de reglas o en las indicaciones de la IA (.cursorrules).
`typescript
export type ScaleType = 'linear' | 'band' | 'utc' | 'point';
export type MarkType = 'lineY' | 'barY' | 'dot' | 'areaY';
export interface AIScaleConfig {
type: ScaleType;
nice?: boolean;
grid?: boolean;
padding?: number;
}
export interface AIMarkConfig {
type: MarkType;
xKey: string;
yKey: string;
color?: string;
strokeWidth?: number;
}
export interface AIChartGenerationSchema {
data: Record<string, unknown>[];
scales: {
x: AIScaleConfig;
y: AIScaleConfig;
};
marks: AIMarkConfig[];
tooltip?: {
enabled: boolean;
className?: string;
};
}
`
Si escribes en el mensaje reglas como importar desde subrutas precisas (por ejemplo, @tanstack/charts/scales/linear) y la regla de uso de useMemo, podrás usar el código que devuelva la IA directamente sin necesidad de modificarlo.