Performance issue when utilizing Parcel to build project.

[mneunomne]

It seems that the performance becomes very slow when the react project is built with Parcel, in comparission with other building tools such as webpack.

Parcel build (very slow performance)

As you can see above, it seems that the object are triggering a layout tick in the application.

Webpack build (normal performance)

---

This was tested on exactly the same code, based on simple example.

App.js

import React from 'react';

import { useState, useEffect } from 'react';

import { createRoot } from "react-dom/client";

import ForceGraph3D from 'react-force-graph-3d';


function App() {

  const [graphData, setGraphData] = useState({nodes: [], links: []});
  const fgRef = React.useRef();
  
  useEffect(() => {
    fetch('datasets/flamengo-vs-palmeiras-2019.json').then(res => res.json()).then(data => {
      setGraphData(data)
      console.log(fgRef.current.scene())
    })
  }, []);
  return (
    <ForceGraph3D
      ref={fgRef}
      graphData={graphData}
    />
  );
}

const container = document.getElementById("app");
const root = createRoot(container)
root.render(<App />);

.parcelrc

{
	"extends": [
		"@parcel/config-default"
	],
	"reporters": [
		"...",
		"parcel-reporter-static-files-copy"
	]
}

package.json

...
{
  "name": "gabigol project",
  "version": "0.1.0",
  "description": "",
  "source": "./src/index.html",
  "default": "dist/index.html",
  "scripts": {
    "webpack-dev": "webpack-dev-server",
    "webpack-build": "webpack",
    "start": "npm run flush && npm run dev",
    "dev": "npm run build-css && npm run parcel:watch",
    "build": "npm run flush && npm run build-css && npm run parcel:build",
    "parcel:watch": "parcel ./src/index.html",
    "parcel:build": "parcel build ./src/index.html --no-source-maps",
    "build-css": "postcss src/tailwind.css -o dist/tailwind.css",
    "flush": "rm -rf dist .parcel-cache"
  },
  "keywords": [],
  "author": "Arrascaeta",
  "license": "Copyright",
  "dependencies": {
    "@parcel/babel-plugin-transform-runtime": "^2.12.0",
    "@parcel/babel-preset-env": "^2.12.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-force-graph-3d": "^1.24.2"
  },
  "devDependencies": {
    "@babel/core": "^7.24.3",
    "@babel/preset-env": "^7.24.3",
    "@babel/preset-react": "^7.24.1",
    "autoprefixer": "^10.4.16",
    "babel-loader": "^9.1.3",
    "copy-webpack-plugin": "^12.0.2",
    "html-webpack-plugin": "^5.6.0",
    "parcel": "^2.12.0",
    "parcel-reporter-static-files-copy": "^1.5.3",
    "postcss-cli": "^11.0.0",
    "process": "^0.11.10",
    "tailwindcss": "^3.4.1",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}