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

说明与用途

在 QueryLens 中将 React Flow 替换为 Flowinger，将图表包大小从 60.5 kB 减少到 19 kB，并将挂载时间从 1.3 s 缩短到 0.7 s，同时保持熟悉的 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).

来源