When there are many nodes, it becomes slow to drag or connect

[joveth1]

This is a great project.

I'm using this in my vue project, the code likes the below：

<VueFlow
        v-model:nodes="nodeList"
        v-model:edges="edgeList"
        :min-zoom="0.1"
        :max-zoom="4.5"
        elevate-edges-on-select
        class="flowCss"
        :connectionRadius="50"
        :defaultEdgeOptions="{ zIndex: 2 }"
        :connectionLineStyle="{ strokeWidth: 2, stroke: '#487FFF' }"
      />

For some reasons, I add nodes more than 60 (In the future, it may exceed 100), then it becomes slow (not smooth) to drag nodes or connect nodes.

My nodes and edges are all Customizing Appearance, but remove the custom nodes and edges it's still not smooth.

When use the react-flow in react project (this is the old project ,we want to change it to vue). The same nodes and config. It's smooth to drag or connect.

Before I'm using vue : 3.5.13 and vite : 6.0.3 , I guess maybe the vite build tool is slow, so I changed the vite to rspack,but still not work.

Maybe it's not due to vueflow, I will make a simple test for this.

Do you have any suggestions?

Thanks!

[joveth1]

@vue-flow/core": "1.42.5“

[joveth1]

After a long period of testing. I think it's may because of the pina store . I'm using the pina store to store nodes and edges. When there are many nodes using pina store will slow to drag the nodes.