What dependencies should be in to devDependencies in React on production

Question

I'm having a problem with the size of node_modules so I'm trying to reduce it as much as possible so my solution right now is to put unused depencies on production after build into devDependencies. So I want to know that in create-react-app What dependencies can I put in devDependencies ?

now dependencies in my package.json look like this

"dependencies": {
   "@babel/runtime": "^7.13.10",
   "@pathofdev/react-tag-input": "^1.0.7",
   "@testing-library/jest-dom": "^5.11.4",
   "@testing-library/react": "^11.1.0",
   "@testing-library/user-event": "^12.1.10",
   "axios": "^0.21.1",
   "express": "^4.17.1",
   "generate-password": "^1.6.0",
   "jquery": "^3.6.0",
   "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "react-icons": "^4.2.0",
   "react-router-dom": "^5.2.0",
   "react-scripts": "4.0.3",
   "react-select": "^4.3.1",
   "react-toastify": "^7.0.4",
   "recoil": "^0.3.1",
   "web-vitals": "^1.0.1"
 },
 "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "autoprefixer": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "style-loader": "^3.3.0",
    "webpack": "^5.57.1",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "^4.3.1"
 },

Answer 1

So at a high level devDependencies are things like your testing / jest / typescript code or @type files - things which are not needed by your production application. I doubt that your user need to run jest (@testing-library/jest-dom). These are all node packages which are used to compile your code.

dependencies are things that your app actually relies on in production, so the production application will / should probably not want to have jest installed and won't be running typescript - it only cares about the compiled code i.e. javascript and those packages that the JS requires - axios / express / react etc. You could put all your packages in the dependencies object, but it would slow your application down and maybe open vulnerabilities hence devDependencies.

node_modules contains all these packages if you don't flag.

Your bundled application should have include --production flag when running npm install.

Feel free to correct me if i am wrong!

https://nodejs.dev/learn/npm-dependencies-and-devdependencies