Why so much Dependencies?

Question

How do all these dependencies in a React app not affect performance?

I am fresh to javascript development with frameworks (React to be precise). Building a fullStack app at the moment. I am still working on the frontend, and package.json is already looking so populated. I am enjoying this, but I keep thinking of the effect it could have in production. And the node modules are excluded (.gitignore) in production, so what does the app depend on when deployed?

{
  "name": "smart-brain",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "clarifai": "^2.9.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-particles-js": "^2.7.0",
    "react-scripts": "3.1.2",
    "react-tilt": "^0.1.4",
    "tachyons": "^4.11.1"
  },
  "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"
    ]
  }
}

Answer 1

so what does the app depend on when deployed?

If the "dependencies": section is written correctly then your React app will depend on:

• all the entries, let's call it entry1, entry2, in this section. Each entry is located under node_modules/entry1, node_modules/entry2 and so forth.

• the dependencies of entry1, entry2, ... and so on located under node_modules/entry1/node_modules, node_modules/entry3/node_modules and so forth. Note entry2 is not mentioned here, let's assume it doesn't have further dependencies.

• further dependencies down the dependency tree e.g. dependencies of the dependecies of entry1, ...

The dependency tree is usually optimised by a special program called 'bundler'. Webpack is a popular bundler, it bundles dependencies into a bundle which is a JS file called for example my-bundle-1.js. The bundle(s) are referenced in the <script> tag in the .html file. Which webpack can, by the way, generate along with the bundles.

You can tell webpack to put the code you write into one or more bundles and put all the dependencies found under node_modules in to another bundle which is commonly called 'vendor' bundle. Then you can look at the bundle sizes and compare. Note that in production build webpack can (and should) minimise bundles and compress them. This affects performance, smaller bundles load faster.

I don't think "react-scripts": "3.1.2" should be in the "dependencies": section, it's better be placed under the "devDependencies": section.

Answer 2

First of all, let me start off with the statement that just because node_modules is listed in .gitignore doesn't mean it's excluded for the production environment. You will need to install the packages listed under "dependencies" in your package.json file in production (via npm install --only=production) before running your node app.

Also, you may see "devDependencies" when you install packages via npm install -D [package name], and these are packages you use in development. You will normally install all the packages listed in your package.json file during development via npm install, but you will need only the packages listed under "dependencies" in production by running npm install --only=production.

Secondly, the number of packages doesn't have a direct relationship to runtime performance. It could have a small impact in your app startup time because it need to load the packages (given that you are using them in your app), but it is hardly a concern to anyone. Also, to address your concern of the large number of dependencies, each packages are normally designed to solve one problem -- like authentication, validation, date/time manipulation, rendering, etc. -- so you may see a lot of dependencies in a typical node web app. However, the size of node_modules isn't too much of an issue to most node developers, but because of how big it can get, there are even memes about it. But again, it's a problem of mere storage size rather than performance.

Answer 3

How do all these dependencies in a React app not affect performance?

Its not going to affect the performance if its not going to run the extra code. The extra code is going to sit there on the disk, but do nothing to the performance. But yes your app will be larger (files size).

And the node modules are excluded (.gitignore) in production, so what does the app depend on when deployed?

Yes it will exclude and it should exclude the node_module because you dont need to transfer all the packages to your server as copy and pasting. And it should not be uploaded to github either. Otherwise it will take forever to upload and download the repository. And whoever download the repository will need to run npm install.

Also, you will need to run npm install after the deployment as you will have to run npm run. And thats how dependencies section of package.json come in handy, to know which packages to install on the production server.

Answer 4

It looks like the only dependencies specified in package.json are:

"dependencies": {
    "clarifai": "^2.9.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-particles-js": "^2.7.0",
    "react-scripts": "3.1.2",
    "react-tilt": "^0.1.4",
    "tachyons": "^4.11.1"
  }

Many production apps I have seen have a good deal more dependencies than that, and build tools like webpack are quite good at optimizing performance and reducing the size of your bundled javascript code.

Also, as you noted, since the node_modules are .gitignored, they won't be tracked in git. However, depending on how you are building and deploying your app in production, there will likely be build scripts that run on the server, which will run npm install (among other things) and download the dependencies there.

Hope that helps a bit!