Низкие скорости отклика (+30 секунд) и JavaScript куча ошибок памяти в Heroku

Question

Итак, я размещаю свое приложение create-Reaction-app на Heroku. Когда я запускаю его локально, у него, похоже, нет проблем. После запуска на Heroku в течение приблизительно одной минуты он падает.

heroku logs --tail -a [myapp] показывает мне это:

2020-04-27T16:17:04.813740+00:00 heroku[web.1]: State changed from up to crashed
2020-04-27T16:17:04.694514+00:00 app[web.1]: 
2020-04-27T16:17:04.694528+00:00 app[web.1]: <--- Last few GCs --->
2020-04-27T16:17:04.694528+00:00 app[web.1]: 
2020-04-27T16:17:04.694538+00:00 app[web.1]: [38:0x2ed0850]    99523 ms: Mark-sweep 251.2 (257.2) -> 250.7 (257.4) MB, 349.7 / 0.0 ms  (average mu = 0.148, current mu = 0.029) allocation failure scavenge might not succeed
2020-04-27T16:17:04.694539+00:00 app[web.1]: [38:0x2ed0850]    99910 ms: Mark-sweep 251.4 (257.4) -> 250.9 (257.7) MB, 375.5 / 0.0 ms  (average mu = 0.085, current mu = 0.028) allocation failure scavenge might not succeed
2020-04-27T16:17:04.694539+00:00 app[web.1]: 
2020-04-27T16:17:04.694539+00:00 app[web.1]: 
2020-04-27T16:17:04.694540+00:00 app[web.1]: <--- JS stacktrace --->
2020-04-27T16:17:04.694540+00:00 app[web.1]: 
2020-04-27T16:17:04.694540+00:00 app[web.1]: ==== JS stack trace =========================================
2020-04-27T16:17:04.694541+00:00 app[web.1]: 
2020-04-27T16:17:04.694541+00:00 app[web.1]: Security context: 0x112cf64008d1 <JSObject>
2020-04-27T16:17:04.694542+00:00 app[web.1]: 0: builtin exit frame: stringify(this=0x112cf641ec89 <Object map = 0x176553443549>,0x1ceaaa3404b1 <undefined>,0x1ceaaa3404b1 <undefined>,0x2f6fcb29dec1 <String[55]: ./node_modules/@material-ui/core/esm/styles/useTheme.js>,0x112cf641ec89 <Object map = 0x176553443549>)
2020-04-27T16:17:04.694542+00:00 app[web.1]: 
2020-04-27T16:17:04.694542+00:00 app[web.1]: 1: arguments adaptor frame: 1->3
2020-04-27T16:17:04.694543+00:00 app[web.1]: 2: moduleId [0x3f9c9a30b1a1] [/app/node_modules/webpack/lib/RuntimeTemplate.js:80] [...
2020-04-27T16:17:04.694543+00:00 app[web.1]: 
2020-04-27T16:17:04.694544+00:00 app[web.1]: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
2020-04-27T16:17:04.695160+00:00 app[web.1]: 1: 0xa02f90 node::Abort() [node]
2020-04-27T16:17:04.695611+00:00 app[web.1]: 2: 0xa033b5 node::OnFatalError(char const*, char const*) [node]
2020-04-27T16:17:04.696109+00:00 app[web.1]: 3: 0xb76ffe v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
2020-04-27T16:17:04.696579+00:00 app[web.1]: 4: 0xb77379 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
2020-04-27T16:17:04.697124+00:00 app[web.1]: 5: 0xd23ad5  [node]
2020-04-27T16:17:04.697654+00:00 app[web.1]: 6: 0xd24166 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
2020-04-27T16:17:04.698201+00:00 app[web.1]: 7: 0xd309e5 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
2020-04-27T16:17:04.698732+00:00 app[web.1]: 8: 0xd31895 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
2020-04-27T16:17:04.699301+00:00 app[web.1]: 9: 0xd3434c v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
2020-04-27T16:17:04.699841+00:00 app[web.1]: 10: 0xcfae8f v8::internal::Factory::New(v8::internal::Handle<v8::internal::Map>, v8::internal::AllocationType) [node]
2020-04-27T16:17:04.700451+00:00 app[web.1]: 11: 0xcfe024 v8::internal::Factory::NewConsString(v8::internal::Handle<v8::internal::String>, v8::internal::Handle<v8::internal::String>, int, bool) [node]
2020-04-27T16:17:04.700964+00:00 app[web.1]: 12: 0xd0d534 v8::internal::Factory::NewConsString(v8::internal::Handle<v8::internal::String>, v8::internal::Handle<v8::internal::String>) [node]
2020-04-27T16:17:04.701602+00:00 app[web.1]: 13: 0x10bb538 v8::internal::IncrementalStringBuilder::Finish() [node]
2020-04-27T16:17:04.702190+00:00 app[web.1]: 14: 0xe1ec20 v8::internal::JsonStringify(v8::internal::Isolate*, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [node]
2020-04-27T16:17:04.702705+00:00 app[web.1]: 15: 0xc287ab v8::internal::Builtin_JsonStringify(int, unsigned long*, v8::internal::Isolate*) [node]
2020-04-27T16:17:04.703443+00:00 app[web.1]: 16: 0x13c04d9  [node]
2020-04-27T16:17:04.745646+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2020-04-27T16:17:04.745851+00:00 app[web.1]: npm ERR! errno 1
2020-04-27T16:17:04.746758+00:00 app[web.1]: npm ERR! frontend@0.1.0 start: `react-scripts start`
2020-04-27T16:17:04.746874+00:00 app[web.1]: npm ERR! Exit status 1
2020-04-27T16:17:04.746975+00:00 app[web.1]: npm ERR!
2020-04-27T16:17:04.747087+00:00 app[web.1]: npm ERR! Failed at the frontend@0.1.0 start script.
2020-04-27T16:17:04.747192+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-04-27T16:17:04.755087+00:00 app[web.1]: 
2020-04-27T16:17:04.755369+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-04-27T16:17:04.755520+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2020-04-27T16_17_04_747Z-debug.log

Теперь я далеко не эксперт в этих вещах, поэтому я пришел сюда, чтобы посмотреть, есть ли какие-нибудь эксперты, которые имели похожий вопрос.

Дополнительная информация:

Heroku Buildpacks:

• https://github.com/lstoll/heroku-buildpack-monorepo

• https://github.com/mars/create-react-app-buildpack.git

Мой пакет. json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 90,
        "functions": 90,
        "lines": 90,
        "statements": 90
      }
    },
    "coverageReporters": [
      "text"
    ]
  },
  "dependencies": {
    "@material-ui/core": "^4.9.11",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "connected-react-router": "^6.7.0",
    "dotenv": "^8.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "history": "^4.10.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-barcode": "^1.4.0",
    "react-dom": "^16.12.0",
    "react-hook-form": "^4.9.6",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "react-transition-group": "^4.3.0",
    "workbox-webpack-plugin": "^5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-hooks": "^1.7.0"
  }
}

Время ожидания ответа на Heroku происходит по маршруту "/", который не делает никаких внешних запросов.

Вещи, которые я пробовал:

• Поиск в Google по похожим вопросам, но ни один из них не соответствует моему случаю

• heroku config:set NODE_OPTIONS="node --max_old_space_size=[up to 8096]" -a [myapp]

• Чтение журналов, чтобы найти что-то, что может быть причиной этого, но из-за моего ограниченного опыта там не было найдено много.

Это кажется мне особенно странным, потому что локально, когда я запускаю приложение с npm start, кажется, что все работает нормально. Нет сбоев или ничего, и время отклика составляет <50 мс (см. Рисунок ниже) для всей страницы. </p>

РЕДАКТИРОВАТЬ: я забыл упомянуть, что это начало происходить примерно в то время, когда я добавил Material-UI в свой проект. Может ли это быть проблемой, которая вызывает это?