为什么有这么多依赖关系？

Question

React应用程序中的所有这些依赖项如何不影响性能？

我对使用框架(准确地说是React)进行javascript开发还很陌生。目前正在构建fullStack应用程序。我还在做前端的工作，而package.json看起来已经很流行了。我很享受这一点，但我一直在想它在生产中可能产生的影响。并且在生产中排除了节点模块(.gitignore)，那么应用程序在部署时依赖于什么？

{
  "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

首先，让我从以下声明开始:仅仅因为.gitignore中列出了node_modules并不意味着在生产环境中排除了它。在运行节点应用程序之前，您需要在生产环境中安装package.json文件中的"dependencies"下列出的包(通过npm install --only=production)。

此外，当您通过npm install -D [package name]安装包时，您可能会看到"devDependencies"，这些包是您在开发中使用的包。在开发过程中，您通常会通过npm install安装package.json文件中列出的所有包，但是在生产环境中，通过运行npm install --only=production，您只需要安装"dependencies"下列出的包。

其次，包的数量与运行时性能没有直接关系。它可能会对你的应用程序启动时间产生很小的影响，因为它需要加载包(假设你在你的应用程序中使用它们)，但这对任何人来说都不是问题。此外，为了解决您对大量依赖项的担忧，每个包通常被设计为解决一个问题--如身份验证、验证、日期/时间操作、呈现等--因此您可能会在典型的节点web应用程序中看到许多依赖项。然而，对于大多数节点开发人员来说，node_modules的大小并不是太大的问题，但由于它可以变得很大，甚至有关于它的模因。但是，这仅仅是存储大小的问题，而不是性能的问题。

Answer 2

看起来在package.json中指定的唯一依赖项是：

"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"
  }

我见过的许多生产应用程序都有比这多得多的依赖关系，像webpack这样的构建工具在优化性能和减小捆绑的javascript代码大小方面非常出色。

另外，正如你所提到的，由于node_modules是.gitignored，所以它们不会在git中被跟踪。但是，根据您在生产环境中构建和部署应用程序的方式，可能会有在服务器上运行的构建脚本，它将运行npm install (以及其他内容)并将依赖项下载到服务器上。

希望这能有所帮助！

Answer 3

如何使React应用程序中的所有这些依赖项不影响性能？

如果不打算运行额外的代码，则不会影响性能。额外的代码将位于磁盘上，但不会对性能造成任何影响。但是，是的，你的app会更大(文件大小)。

在生产环境中排除了

和节点模块(.gitignore)，那么应用程序在部署时依赖于什么？

是的，它将排除也应该排除node_module，因为您不需要将所有的包作为复制和粘贴传输到您的服务器。它也不应该被上传到github。否则，上传和下载存储库将永远花费时间。无论谁下载存储库，都需要运行npm install。

此外，您还需要在部署之后运行npm install，因为您必须运行npm run。这就是package.json的dependencies部分如何派上用场的，它可以知道要在生产服务器上安装哪些包。