plotly / plotly/react-plotly.js

What is a decent dist js file size when built with ReactPlotly?

Open
#351 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.1k
Forks
138
Avg merge
3d 2h
Merged PRs (30d)
4

Description

I tried to build the React App.
Result in a js file with 6MB.

I then:
Tried to use "plotly.js-basic-dist-min": "^3.0.1", instead of full plotly.
Tried to visualize the file size.
Tried to separate the vendor js files.
Tried to lazy load.

So I got that separated the plotly: dist/assets/vendor-plotly-Bm52808Q.js 4,680.60 kB │ gzip: 1,423.36 kB
But the overall React js file size still 6MB.

Is this file size normal?

--
"build": "tsc -b && vite build",

dist/assets/index-DgJ6yXsq.css                   0.31 kB │ gzip:     0.18 kB
dist/assets/vendor-react-router-9ypsb6aL.js      2.97 kB │ gzip:     1.48 kB
dist/assets/vendor-redux-D7k4_v1h.js             8.42 kB │ gzip:     3.59 kB
dist/assets/components-C0CniH_l.js              13.83 kB │ gzip:     5.67 kB
dist/assets/vendor-i18next-BBDCRDLV.js          51.13 kB │ gzip:    15.84 kB
dist/assets/vendor-zod-3J8MD0HF.js              64.18 kB │ gzip:    15.68 kB
dist/assets/vendor-lodash-S3xO4mhn.js           71.90 kB │ gzip:    26.71 kB
dist/assets/index-DE5zG-tJ.js                  260.51 kB │ gzip:   101.79 kB
dist/assets/vendor-DpoEKLv_.js                 472.98 kB │ gzip:   161.00 kB
dist/assets/vendor-mui-Bwo8r--z.js             865.82 kB │ gzip:   250.29 kB
dist/assets/vendor-plotly-Bm52808Q.js        4,680.60 kB │ gzip: 1,423.36 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 1m 35s

--
import { visualizer } from 'rollup-plugin-visualizer';

Image

--
package.json

  "dependencies": {
    "@emotion/cache": "^11.14.0",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@hookform/resolvers": "^4.1.1",
    "@mui/icons-material": "^6.4.3",
    "@mui/material": "^6.4.3",
    "@mui/x-data-grid": "^7.26.0",
    "@mui/x-date-pickers": "^7.27.0",
    "@reduxjs/toolkit": "^2.5.1",
    "chroma-js": "^3.1.2",
    "dayjs": "^1.11.13",
    "i18next": "^24.2.2",
    "immer": "^10.1.1",
    "lodash": "^4.17.21",
    "material-ui-popup-state": "^5.3.3",
    "mui-markdown": "^1.2.5",
    "plotly.js-basic-dist-min": "^3.0.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-dropzone": "^14.3.8",
    "react-helmet-async": "^2.0.5",
    "react-hook-form": "^7.54.2",
    "react-plotly.js": "^2.6.0",
    "react-qr-code": "^2.0.15",
    "react-redux": "^9.2.0",
    "react-router-dom": "^6.30.0",
    "react-ui-scrollspy": "^2.3.0",
    "uuid": "^11.0.5",
    "zod": "^3.24.1",
    "zod-i18n-map": "^2.27.0"
  },

--
vite.config.ts

build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              if (id.includes('@mui')) {
                return 'vendor-mui';
              }
              if (id.includes('@reduxjs/toolkit') || id.includes('react-redux')) {
                  return 'vendor-redux';
              }
              if (id.includes('lodash')) {
                return 'vendor-lodash';
              }
              if (id.includes('i18next')) {
                return 'vendor-i18next';
              }
              if (id.includes('react-router-dom')) {
                return 'vendor-react-router';
              }
              if (id.includes('zod')) {
                return 'vendor-zod';
              }
  
              // Add Plotly.js Chunk
              if (id.includes('plotly.js')) {
                return 'vendor-plotly';
              }
              if (id.includes('react-plotly.js')) {
                return 'vendor-plotly';
              }
              if (id.includes('plotly.js-basic-dist-min')) {
                return 'vendor-plotly';
              }
  
              // General vendor chunk for other node_modules
              return 'vendor';
            }
  
            if (id.includes('/src/components/')) {
              return 'components';
            }
          },
        },
      },
    }

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the build described in package.json and vite.config.ts, then inspect the generated vendor-plotly and other chunks with the mentioned rollup-plugin-visualizer. The issue does not define a code change or a concrete completion test; a maintainer would need to clarify whether the goal is to explain the size or reduce it.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, plotly, react, vite
Domain
build-system, data-visualization, frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.