Wie man ein durch Recharts aufgeblähtes Dashboard-Bundle mit TanStack Charts abspeckt
TuBrief 편집팀
2026년 8월 12일
0
Computing/Software원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
Wenn du eine Dashboard-Seite aufrufst und die Sanduhr sich nur wegen des Chart-Ladevorgangs dreht, liegt das zu zehn Prozent an Recharts. Wenn man sieht, wie ein paar hinzugefügte Charts die Bundle-Größe um Hunderte von Kilobyte anwachsen lassen, kann man nur noch seufzen. Recharts ist zu eng an den React-DOM-Reconciliation-Zyklus gekoppelt. Da UI-Struktur und Datenverarbeitung miteinander verstrickt sind, lässt es sich kaum leichtgewichtigen Herzens nutzen.
In solchen Fällen ist TanStack Charts eine gute Alternative. Die Visualisierungslogik wurde hier in einen grafikgrammatikbasierten Core ausgelagert. Während Recharts in der Regel über 150 KiB verschlingt, liegt TanStack Charts bei rund 40 KiB. Die Bundle-Größe schrumpft damit um fast 70%.
Das Problem ist die Migration des Produktionscodes. Funktionierende Screens umzubauen ist immer eine ungemütliche Angelegenheit. Um das Team zu überzeugen und eine fehlerfreie Umstellung zu gewährleisten, ist eine klare Reihenfolge erforderlich.
Wenn man versucht, alles auf einmal zu ändern, ist es kaum möglich zu finden, wo etwas schiefgegangen ist. Man sollte sich eine Komponente greifen und das Ganze in genau 4 Schritten durchführen.
marks-Array des defineChart-Deklarationsobjekts verschoben.ResponsiveContainer und Tooltip werden durch den automatischen Skalierer von TanStack und das Modul @tanstack/charts/tooltip ersetzt.useMemo eingepackt und an die oberste Chart-Komponente übergeben.Wenn du dich an diese Reihenfolge hältst, kannst du die Zeit für den Austausch der ersten Chart-Komponente halbieren.
`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 wirkt unschön, wenn bei jedem Umschalten des Dark Mode die gesamte Chart-Komponente neu gezeichnet wird. TanStack Charts unterstützt CSS-Custom-Properties und currentColor direkt anstelle von hartcodierten Farbvalues.
Verwaltet die Chart-Farben nicht im JavaScript-State, sondern füttert sie über CSS-Variablen ein. Die Standard-Farbpalette des Charts lässt sich einfach so einrichten, dass sie von --ts-chart-1 bis --ts-chart-6 referenziert.
[data-theme='dark'] im Voraus.var(--ts-chart-1) an stroke oder fill in den defineChart-Optionen.Wenn man es so aufbaut, muss man die TSX-Dateien nicht anfassen, wenn der Designer verlangt, die Chart-Farben zu ändern. Einfach nur das CSS anpassen und fertig.
`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;
}
`
Wenn 100.000 Datenpunkte als SVG gerendert werden, entstehen 100.000 DOM-Knoten. Das hält der Browser-Thread nicht aus. Die Ruckler sind mit bloßem Auge sichtbar.
Die Lösung besteht darin, zwei Ansätze zu kombinieren: Zum einen der Wechsel zum Canvas-Renderer, um die DOM-Erstellungskosten zu eliminieren, und zum anderen die Komprimierung von Daten, die sinnlos dichter sind als die Pixelbreite des Bildschirms, mittels des LTTB-Algorithmus (Largest Triangle Three Buckets). LTTB reduziert die Anzahl der Punkte, während die markanten Merkmale der Daten (Maximal- und Minimalwerte) erhalten bleiben.
`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;
}
`
Bei der Verarbeitung großer Zeitreihendaten sollten wir die Anzahl der Punkte mithilfe von LTTB auf etwa 1.000 reduzieren und übergeben. Aktiviere zudem die Option spatialIndex: true, um die Komplexität der Mauszeigererkennung zu verringern. Wenn du schließlich den Canvas-Renderer aus dem Paket @tanstack/charts/react/canvas einbindest, erreichst du butterweiche 60 fps.
Bei Bibliotheken mit tief verschachtelten JSX-Tags wie Recharts neigen KI-Assistenten stark zu Halluzinationen. Sie erfinden seltsame Attribute oder vergessen, geöffnete Tags zu schließen.
Bibliotheken, die wie TanStack Charts auf objektbasierten Deklarationen basieren, liefern der KI sauberen Code, sobald man ihr das richtige Typenschema an die Hand gibt. Definiere einfach ein Schematyp wie den folgenden in deinem Projekt und hinterlege ihn im KI-Prompt oder in der Regeldatei (.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;
};
}
`
Wenn du dem Prompt Regeln hinzufügst – wie etwa den Import aus exakten Subpfaden wie @tanstack/charts/scales/linear und die Verwendung von useMemo –, kannst du den von der KI generierten Code ohne manuelle Korrekturen direkt verwenden.