为什么会有这么多依赖？

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

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

此外，当您通过npm install -D [package name]安装软件包时，您可能会看到"devDependencies" ，这些是您在开发中使用的软件包。 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 .

其次，包的数量与运行时性能没有直接关系。 它可能会对您的应用程序启动时间产生很小的影响，因为它需要加载包（假设您在应用程序中使用它们），但这几乎不是任何人关心的问题。 此外，为了解决您对大量依赖项的担忧，每个包通常旨在解决一个问题——例如身份验证、验证、日期/时间操作、渲染等——因此您可能会在一个包中看到很多依赖项典型节点 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部分如何派上用场，以了解要在生产服务器上安装哪些软件包。

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":部分下。