plotly / plotly/react-plotly.js

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

未關閉
#351 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

主要語言
JavaScript
星號
1.1k
分支
138
平均合併
3 天 2 小時
30 天內合併 PR
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';

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

貢獻指南

這個儲存庫沒有索引到貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

研究方向

先重現 package.json 和 vite.config.ts 中描述的建置,然後使用提到的 rollup-plugin-visualizer 檢查產生的 vendor-plotly chunk 和其他 chunk。此 issue 沒有定義程式碼變更或具體的完成測試;維護者需要釐清目標是解釋大小還是減少大小。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
javascript, plotly, react, vite
領域
build-system, data-visualization, frontend, performance
Issue 類型
缺陷
難度
4/5
預估耗時
3-5 天
活躍度
停滯
描述清晰度
需要釐清
新手友好度
25/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。