plotly / plotly/react-plotly.js
What is a decent dist js file size when built with ReactPlotly?
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- JavaScript
- Star
- 1.1k
- Fork
- 138
- Merge trung bình
- 3 ngày 2 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
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';
}
},
},
},
}
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Trước tiên, hãy tái hiện build được mô tả trong package.json và vite.config.ts, sau đó kiểm tra các chunk vendor-plotly được tạo ra và các chunk khác bằng rollup-plugin-visualizer đã được đề cập. Issue không xác định thay đổi mã nguồn hay một bài kiểm tra hoàn thành cụ thể; maintainer cần làm rõ mục tiêu là giải thích kích thước hay giảm kích thước đó.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript, plotly, react, vite
- Lĩnh vực
- build-system, data-visualization, frontend, performance
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Cần làm rõ
- Mức phù hợp với người mới
- 25/100