Skip to content

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

Open
@Norlandz

Description

@Norlandz

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'; } }, }, }, } 

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      close