求助：如何大幅压缩React应用330MB的构建体积？

问题背景 #

我的React应用构建后体积高达330MB，构建文件夹内的JS chunk数量超过500个，部分chunk体积甚至达到14-20MB。已在路由层面实现懒加载，推测核心问题是项目引入的依赖过多，以下是package.json中的依赖列表：

"dependencies": {
    "@date-io/date-fns": "1.x",
    "@date-io/dayjs": "1.x",
    "@draft-js-plugins/editor": "^4.1.3",
    "@draft-js-plugins/inline-toolbar": "^4.1.6",
    "@dschoon/react-waves": "^4.0.3",
    "@material-ui/core": "^4.11.1",
    "@material-ui/data-grid": "^4.0.0-alpha.37",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@material-ui/styles": "^4.11.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "ag-grid-community": "^28.2.1",
    "ag-grid-react": "^28.2.1",
    "autosuggest-highlight": "^3.2.0",
    "axios": "^0.20.0",
    "bootstrap": "^4.6.2",
    "chart": "^0.1.2",
    "chart.js": "^3.8.0",
    "clsx": "^1.1.1",
    "date-fns": "^2.16.1",
    "dayjs": "^1.9.5",
    "dom-to-image": "^2.6.0",
    "draft-js": "^0.11.7",
    "file-saver": "^2.0.5",
    "framer-motion": "^4.1.17",
    "google-map-react": "^2.1.9",
    "gridjs-react": "^3.4.0",
    "highcharts": "^8.2.2",
    "highcharts-3d": "^0.1.7",
    "highcharts-react-official": "^3.0.0",
    "joi-browser": "^13.4.0",
    "jquery": "^3.5.1",
    "jsonwebtoken": "^8.5.1",
    "jspdf": "^2.1.1",
    "jspdf-autotable": "^3.5.13",
    "jszip": "^3.5.0",
    "jwt-decode": "^3.0.0",
    "kml-parse": "^0.0.2",
    "kmljs": "^0.0.1",
    "lodash": "^4.17.20",
    "mapbox-gl": "^1.12.0",
    "material-icons": "^0.3.1",
    "material-table": "^1.69.1",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "parse-kml": "^1.0.1",
    "query-string": "^6.13.7",
    "react": "^16.13.1",
    "react-audio-player": "^0.17.0",
    "react-audio-spectrum": "^0.1.0",
    "react-autosuggest": "^10.1.0",
    "react-avatar-edit": "^0.9.0",
    "react-chartjs-2": "^4.2.0",
    "react-color": "^2.19.3",
    "react-csv-reader": "^3.1.2",
    "react-detect-offline": "^2.4.5",
    "react-dom": "^16.13.1",
    "react-draft-wysiwyg": "^1.15.0",
    "react-file-reader": "^1.1.4",
    "react-html-table-to-excel": "^2.0.0",
    "react-icons": "^3.11.0",
    "react-image-gallery": "^1.0.8",
    "react-images-viewer": "^1.6.2",
    "react-json-to-csv": "^1.0.4",
    "react-loader-spinner": "^3.1.14",
    "react-mapbox-gl": "^5.1.1",
    "react-navigator-online": "^1.0.7",
    "react-pivottable": "^0.11.0",
    "react-player": "^2.7.2",
    "react-plotly.js": "^2.5.1",
    "react-redux": "^7.2.1",
    "react-responsive-carousel": "^3.2.22",
    "react-router-dom": "^5.2.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "^3.4.3",
    "react-select": "^5.4.0",
    "react-sortable-hoc": "^2.0.0",
    "react-spinners": "^0.9.0",
    "react-spring": "^8.0.27",
    "react-swipeable-views": "^0.13.9",
    "react-toastify": "8.2",
    "react-viewer": "^3.2.2",
    "react-virtualized": "^9.22.3",
    "react-wavy-audio": "^1.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0",
    "socket.io-client": "^4.5.4",
    "string_decoder": "^1.3.0",
    "styled-components": "^5.3.5",
    "sunburst": "^2.0.0",
    "survey-analytics": "^1.8.18",
    "survey-creator": "^1.9.4",
    "survey-pdf": "^1.8.22",
    "survey-react": "^1.9.4",
    "surveyjs-widgets": "^1.9.4",
    "uuid": "^8.3.2",
    "uuid-v4": "^0.1.0",
    "uuidv4": "^6.2.12",
    "wavesurfer": "^1.3.4",
    "wavesurfer.js": "^6.0.4",
    "xlsx": "^0.17.4",
    "xml2js": "^0.4.23"
  },

一、依赖瘦身：清理冗余与替换重依赖 #

• 移除重复/冗余依赖：
  • 日期处理：同时引入date-fns、dayjs、moment+moment-timezone，只保留业务最适配的一个（推荐dayjs，体积最小），删除另外两个及对应的@date-io适配包（仅保留选中库的适配包）。
  • UUID工具：uuid、uuid-v4、uuidv4三者重复，只保留官方维护的uuid，其余全部删除。
  • 音频相关：wavesurfer、wavesurfer.js、@dschoon/react-waves等多个音频库共存，仅保留业务实际使用的1-2个，清理其余。
  • KML解析：kml-parse、kmljs、parse-kml功能重叠，选择维护活跃的一个保留，删除另外两个。
  • 表格组件：ag-grid-react、gridjs-react、material-table等多套表格方案，只留业务所需的一套，清理冗余。
  • 图表库：chart.js+react-chartjs-2、highcharts系列、react-plotly.js多库共存，仅保留业务使用的一种。
  • 离线检测：react-detect-offline、react-navigator-online二选一即可。
  • 图片查看器：react-image-gallery、react-images-viewer、react-viewer只保留一个。
  • 测试依赖：@testing-library/*属于开发依赖，移到devDependencies中，避免打包进生产构建。
• 替换重体积依赖：
  • 用yup或zod替换joi-browser，后者浏览器端体积过大。
  • jquery+bootstrap：若仅用Bootstrap样式，只引入CSS文件并删除jquery；若需JS功能，改用react-bootstrap替代原生Bootstrap，避免引入jQuery。
  • jsonwebtoken是Node端库，浏览器端仅需jwt-decode，删除jsonwebtoken。

二、构建流程优化 #

• 启用Gzip/Brotli压缩：
  通过craco或react-app-rewired修改webpack配置开启压缩，或在服务器端配置Gzip/Brotli，大幅减少传输体积。
• 分析构建体积：
  使用source-map-explorer定位大体积chunk和依赖：

  npm install source-map-explorer --save-dev
  npm run build
  npx source-map-explorer 'build/static/js/*.js'
  

• 优化webpack chunk分割：
  • 将surveyjs系列、mapbox-gl、highcharts这类大依赖单独拆分为独立chunk，避免与业务代码打包在一起。
  • 通过react-app-rewired修改splitChunks配置，合并过小的chunk，减少总chunk数量。
• Tree Shaking优化：
  • 确保依赖均支持ES模块（优先用import/export），对Material-UI这类库，用babel-plugin-transform-imports实现按需引入。
  • 避免全局引入样式库，改为按需引入所需样式，或用CSS-in-JS方案替代。

三、代码与组件层面优化 #

• 组件级懒加载：
  除路由懒加载外，对页面内的大型组件（如富文本编辑器、复杂表格、图表）用React.lazy和Suspense包裹，进一步拆分chunk。
• 按需引入依赖：
  • lodash避免全局引入，改用按需引入：import debounce from 'lodash/debounce'，或用lodash-es配合Tree Shaking。
  • Material-UI组件采用按需引入：import Button from '@material-ui/core/Button'，而非全局引入。
• 移除未使用代码：
  用ESLint的no-unused-vars规则检查并删除未使用的组件、函数和依赖，清理死代码。

四、其他优化点 #

• 升级React和构建工具：
  当前react-scripts版本为3.4.3，升级至最新稳定版（如v5.x），新版本webpack和babel具备更好的压缩与优化能力。
• 替换大体积功能组件：
  若业务需求不复杂，用更轻量的富文本编辑器（如react-quill）替换react-draft-wysiwyg+draft-js。
• 静态资源处理：
  将图片、字体等静态资源上传至CDN，不打包进JS chunk，减少构建体积。

内容的提问来源于stack exchange，提问作者Huzaifa Aslam