為什么會有這么多依賴？

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