We Replaced React Flow in Our App and Cut the Diagram Bundle from 60.5 kB to 19 kB

Описание и применение

Замена React Flow на Flowinger в QueryLens сократила размер диаграммы с 60,5 кБ до 19 кБ и ускорила монтирование графа с 1,3 с до 0,7 с, сохранив знакомый API и модульную архитектуру.

Задача

The diagram viewer in QueryLens shipped over 60.5 kB gzipped, including unnecessary runtime dependencies and a mandatory global stylesheet, which was too large for a focused visualization feature.

Результат

Replacing React Flow with Flowinger cut the diagram bundle from 60.5 kB to 19 kB gzipped (≈68.6 % reduction) and improved mount time from 1.3 s to 0.7 s for 10,000‑node graphs, while maintaining a familiar API and modular feature set.

Рабочий процесс

• 1. Identified excess bundle size and dependencies in QueryLens.
• 2. Designed Flowinger to preserve React Flow API while removing unnecessary overhead.
• 3. Implemented zero external runtime dependencies and modular core features.
• 4. Replaced React Flow imports with Flowinger imports and removed stylesheet import.
• 5. Benchmarked mount, pan, zoom, and drag times on synthetic 10,000‑node graphs.
• 6. Compared bundle sizes and performance metrics with React Flow.
• 7. Validated results in production QueryLens build.

Доказательства

The diagram chunk in our client build weighed over 60.5 kB gzipped.

Источник

In our QueryLens build: The diagram chunk dropped from 60.5 kB to 19 kB gzipped (a ~68.6% reduction).

Источник

In our 10,000-node, unculled benchmark, Flowinger mounted the graph in 0.7 seconds compared with 1.3 seconds for React Flow (~1.9× faster).

Источник

Flowinger has zero external runtime dependencies beyond its React peer dependencies (react and react-dom).

Источник