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

Description and use

Replacing React Flow with Flowinger in QueryLens reduced the diagram bundle from 60.5 kB to 19 kB and cut mount time from 1.3 s to 0.7 s, while keeping a familiar API and modular architecture.

Problem

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.

Outcome

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.

Workflow

• 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.

Evidence

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

Source

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

Source

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).

Source

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

Source