Open
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';
--
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
Labels
No labels