Question

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

看来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 2

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

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

第二，程序包的数量与运行时性能没有直接关系。这可能会对您的应用启动时间产生很小的影响，因为它需要加载程序包（假设您在应用中使用了它们），但是任何人都不会担心。另外，为了解决您对大量依赖项的担忧，通常每个软件包都旨在解决一个问题，例如身份验证，验证，日期/时间操作，渲染等。因此，您可能会在一个软件包中看到很多依赖项。典型的节点Web应用程序。但是，对于大多数节点开发人员来说，node_modules的大小并不是一个太大的问题，但是由于它可以变大，甚至存在模因。但这又是一个问题，仅仅是存储大小而不是性能。

Answer 3

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

如果不运行额外的代码，则不会影响性能。多余的代码将放在磁盘上，但是对性能没有任何影响。但是可以，您的app会更大（文件大小）。

并且生产中排除了节点模块（.gitignore），所以该应用程序依赖于何时部署？

是的，它将排除并且应该排除node_module，因为您不需要将所有软件包作为复制和粘贴转移到服务器上。并且也不应该将其上传到github。否则，将需要永远上传和下载存储库。不论谁下载存储库，都需要运行npm install。

此外，在部署之后，您将需要运行npm install，因为您将必须运行npm run。这就是dependencies的{{1}}部分如何派上用场的地方，以了解要在生产服务器上安装哪些软件包。

Answer 4

那么应用程序在部署时取决于什么？

如果"dependencies":部分的编写正确，那么您的React应用将取决于：

所有条目，在本节中，我们将其称为entry1，entry2。每个条目位于node_modules/entry1，node_modules/entry2等下方。
位于entry1，entry2等下的node_modules/entry1/node_modules，node_modules/entry3/node_modules，...等的依存关系。注意entry2在这里没有提到，让我们假设它没有进一步的依赖性。
在依赖关系树中的进一步依赖关系，例如entry1，...

依赖关系树通常通过称为“捆绑器”的特殊程序进行优化。 Webpack是一个流行的捆绑程序，它将依赖项捆绑到一个捆绑包中，该捆绑包是一个称为my-bundle-1.js的JS文件。捆绑包在.html文件的<script>标记中引用。顺便说一下，哪个webpack可以与包一起生成。

您可以告诉webpack将您编写的代码放入一个或多个捆绑软件中，并将在node_modules下找到的所有依赖项放入另一个捆绑软件中，这通常称为“供应商”捆绑软件。然后，您可以查看捆绑包的大小并进行比较。请注意，在生产版本中，webpack可以（并且应该）最小化包并对其进行压缩。这会影响性能，较小的捆绑包加载速度会更快。

我不认为"react-scripts": "3.1.2"应该放在"dependencies":部分，最好放在"devDependencies":部分下面。

为什么有那么多的依赖关系？

4 个答案: