plotly / plotly/react-plotly.js
What is a decent dist js file size when built with ReactPlotly?
まだ誰も着手していません。
- 主要言語
- JavaScript
- スター
- 1.1k
- フォーク
- 138
- 平均マージ
- 3日 2時間
- マージ済み PR(30日)
- 4
説明
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';
}
},
},
},
}
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず、package.json と vite.config.ts に記述された build を再現し、次に、言及されている rollup-plugin-visualizer を使って、生成された vendor-plotly およびその他の chunk を調査します。この issue ではコード変更も具体的な完了テストも定義されていないため、目標がサイズの説明なのか削減なのかを maintainer が明確にする必要があります。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, plotly, react, vite
- 領域
- build-system, data-visualization, frontend, performance
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 25/100