reactjs - How to only build JavaScript that is used in my React Web app with Brunch?

Question

I became a maintainer of a React web app that is built with Brunch. I noticed that it loads very slowly in the web browser. I think the slow performance is mostly due to HUGE app.js JavaScript. It's 7 MB, or 5 MB if I do the production build, unminified/uncompressed. I analyzed the performance using the "Performance" tab in Chrome developer tools. It takes about 2.2 seconds to download the app.js file over the network and 1.4 sec for "scripting" (which I think is JavaScript parsing and executing) on Mac laptop in Chrome. While the download slowdown only happens on first load, the parsing will slow down the web site every time.

I suspect that Brunch combines JavaScript from all libraries in node_modules directory into app.js (see brunch-config.js below), instead of using only those libraries that are actually used in the app.

Question: Is there a way to only load the code that is needed to make the web app faster? An automatic approach is preferred.

brunch-config.js

exports.config = {

  files: {
    javascripts: {
      joinTo: {
        'app.js': /^(app|node_modules|vendor)/
      }
    },
  ...

Package.json

...
  "dependencies": {
    "axios": "^0.18.1",
    "babel-brunch": "^7.0.1",
    "babel-polyfill": "^6.26.0",
    "bootstrap-sass": "^3.3.7",
    "date-fns": "^2.14.0",
    "downloadjs": "^1.4.7",
    "jsenv-brunch": "^2.0.0",
    "moment": "^2.15.1",
    "papaparse": "^5.0.0",
    "react": "~16.4",
    "react-bootstrap": "^0.32.4",
    "react-bootstrap-table-next": "^3.1.4",
    "react-bootstrap-table2-editor": "^1.2.4",
    "react-date-range": "^1.0.3",
    "react-datepicker": "^2.7.0",
    "react-dom": "~16.4",
    "react-input-enhancements": "^0.7.5",
    "react-progress-button": "^5.0.2",
    "react-redux": "~4.4.5",
    "react-router": "^3.2.1",
    "recharts": "1.8.5",
    "redux": "~3.5.2",
    "redux-actions": "^1.2.0",
    "redux-form": "^6.8.0",
    "redux-persist": "^3.5.0",
    "redux-saga": "^0.11.1",
    "regenerator-transform": "^0.14.1",
    "terser-brunch": "^4.0.0",
    "uglify-es": "^3.3.9",
    "update": "^0.7.4"
  }
  ...

Answer 1

等待大神答复