Javascript：如果没有在任何地方导入，package.json 依赖项是否包含在构建中？

在项目中，package.json 文件中列出了一些依赖包（npm install [some-name] --save），但未在源代码中的任何 ES6 模块文件中导入。该包是否会包含在最终版本中（例如汇总输出）？

据我了解，未导入的 es6 模块甚至不能提供任何副作用，因此捆绑器（例如 rollup、webpack）在依赖关系图中没有它。正因为如此，bundler 甚至不知道它的存在。所以，如果我是正确的，这样的包不包含在捆绑包中。但是，在这种情况下，对于使用任何捆绑器的项目，如果捆绑器用自己的逻辑决定（当它遵循“导入/导出”语句时），那么在 package.json 中分离“依赖项”和“开发依赖项”的原因是什么？输出中包含什么？

根据Webpackdoc，Webpack 生成一个依赖图 https://webpack.js.org/concepts/dependency-graph/从...开始入口点 https://webpack.js.org/concepts/under-the-hood/这通常是index.js。 而且如果你使用类似的东西create-react-app在底层使用 webpack，它将生成一个像这样的包 json：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "build": "react-scripts build",
  },

你可以看到没有devDependencies！这意味着并非所有您刚刚戴上的东西dependencies将包含在您的最终版本中。

最后我在一个新的内部进行了测试CRA my app:

1. pressed npm run build在裸机安装上：

File sizes after gzip:

  46.61 kB  build\static\js\main.46f5c8f5.js
  1.78 kB   build\static\js\787.28cb0dcd.chunk.js
  541 B     build\static\css\main.073c9b0a.css

2. 通过安装 axiosnpm i axios，但从未导入过。 运行后输出npm run build:

File sizes after gzip:

  46.61 kB  build\static\js\main.46f5c8f5.js
  1.78 kB   build\static\js\787.28cb0dcd.chunk.js
  541 B     build\static\css\main.073c9b0a.css

一切都没有改变！

3. 从“axios”导入 axios，但不要在代码中使用它：

import axios from "axios";
export default function App() {
  return (
    <div className="App">
    </div>
  );
}

这是输出：

[eslint]
src\App.js
  Line 3:8:  'axios' is defined but never used  no-unused-vars

File sizes after gzip:

  46.61 kB  build\static\js\main.46f5c8f5.js
  1.78 kB   build\static\js\787.28cb0dcd.chunk.js
  541 B     build\static\css\main.073c9b0a.css

又什么都没有改变！但你可以看到eslint也警告！

4. 使用它的功能之一，例如仅获取方法：

import axios from "axios";
export default function App() {
  console.log(axios.get);
  return (
    <div className="App">
    </div>
  );
}

输出：

File sizes after gzip:

  57.92 kB (+11.31 kB)  build\static\js\main.4c83ea39.js
  1.78 kB               build\static\js\787.28cb0dcd.chunk.js
  541 B                 build\static\css\main.073c9b0a.css

结论:

如果我们不在应用程序中使用包，它就不会进入最终版本。

Note:

尽管额外的软件包不会影响生产，但不要忘记时常卸载未使用的软件包。 运行 npm install 仍然会安装 package.json 中定义的每个包，无论是否使用它们。因此，拥有大量未使用的软件包会减慢部署速度并影响您的队友（他们也需要运行 npm install！！）

参考 https://www.reddit.com/r/reactjs/comments/111hbws/are_all_dependencies_ins_packagejson_will_be/