Comment alléger un bundle de tableau de bord alourdi par Recharts grâce à 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 vous visitez une page de tableau de bord et que le sablier tourne en attendant le chargement des graphiques, c'est très probablement un problème lié à Recharts. Voir la taille du bundle gonfler de plusieurs centaines de ko juste pour l'ajout de quelques graphiques suffit à faire soupirer. Recharts est trop étroitement lié au cycle de réconciliation de React. La structure de l'UI et le traitement des données y sont intriqués, ce qui rend son utilisation légère difficile.
Dans ce cas, TanStack Charts constitue une bonne alternative. La logique de visualisation y est séparée dans un noyau basé sur la grammaire graphique. Alors que Recharts pèse généralement plus de 150 Ko, TanStack Charts tourne autour de 40 Ko. La taille du bundle est ainsi réduite de près de 70 %.
Le problème réside dans la migration du code de production. Il est toujours délicat de modifier une interface qui fonctionne bien. Convaincre les membres de l'équipe et effectuer la transition sans accroc nécessite un ordre d'intervention clair.
Essayer de tout remplacer d'un coup rend la localisation des bugs ardue. Il faut procéder composant par composant, en suivant exactement 4 étapes :
marks de l'objet de déclaration defineChart.ResponsiveContainer et Tooltip par l'échelle automatique de TanStack et le module @tanstack/charts/tooltip.useMemo et passez-le au composant racine Chart.En respectant cet ordre, vous réduirez de moitié le temps nécessaire pour remplacer le premier composant graphique.
`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 }}>
);
}
`
Il est inélégant de redessiner l'intégralité du composant graphique à chaque bascule de mode sombre. TanStack Charts prend directement en charge les propriétés personnalisées CSS et currentColor au lieu de valeurs de couleur codées en dur.
Plutôt que de gérer les couleurs des graphiques via l'état JavaScript, injectez-les sous forme de variables CSS. Il suffit de faire référence à la palette de base des graphiques de --ts-chart-1 à --ts-chart-6.
[data-theme='dark'].var(--ts-chart-1) dans le stroke ou le fill des options de defineChart.De cette façon, lorsqu'un designer demande de modifier les couleurs des graphiques, il n'est pas nécessaire de toucher aux fichiers TSX. Il suffit de modifier le CSS.
`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;
}
`
Le rendu de 100 000 points en SVG génère 100 000 nœuds DOM. Le thread du navigateur ne peut pas suivre, et des ralentissements se font ressentir à l'écran.
La solution consiste à combiner deux approches : passer au moteur de rendu Canvas pour éliminer les coûts de création du DOM, et compresser les données trop denses par rapport à la largeur en pixels de l'écran à l'aide de l'algorithme LTTB (Largest Triangle Three Buckets). LTTB réduit le nombre de points tout en préservant les caractéristiques saillantes des données (valeurs maximales et minimales).
`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;
}
`
Lors du traitement de séries temporelles volumineuses, réduisez les données à environ 1 000 éléments grâce à LTTB avant de les transmettre. Activez ensuite l'option spatialIndex: true pour réduire la complexité de la détection du pointeur de la souris. Enfin, l'intégration du moteur de rendu Canvas du paquet @tanstack/charts/react/canvas permet d'atteindre 60 fps.
Les structures où les balises JSX sont profondément imbriquées, comme dans Recharts, poussent souvent les assistants IA à générer des hallucinations, créant des attributs étranges ou oubliant de fermer des balises.
Pour les bibliothèques basées sur la déclaration d'objets comme TanStack Charts, il suffit de fournir un bon schéma de types pour que l'IA produise un code propre. Définissez un type de schéma tel que ci-dessous dans votre projet et intégrez-le dans vos prompts IA ou votre fichier de règles (.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;
};
}
`
En incluant dans le prompt la règle d'importer depuis le sous-chemin exact comme @tanstack/charts/scales/linear ainsi que la règle d'utilisation de useMemo, vous pourrez utiliser directement le code généré par l'IA sans aucune modification.