Javascript:如果没有导入到任何地方,package.json依赖项是否包含在构建中?

zpqajqem  于 2023-02-15  发布在  Java
关注(0)|答案(2)|浏览(111)

在项目中,package.json文件中列出了一些依赖包(npm install [some-name] --保存),但未在源代码中的任何ES6模块文件中导入。此包是否将包含在最终构建版本中(例如,汇总输出)?
据我了解,没有导入的es6模块甚至不能提供任何副作用,所以bundler(例如,rollup,webpack)在依赖关系图中没有它。正因为如此,bundler甚至不知道它的存在。所以,如果我是正确的,这样的包不包括在bundle中。但是,在这种情况下,为什么要在package.json中将“dependencies”和“dev-dependencies”分开呢?对于使用任何bundler的项目,bundler是否使用自己的逻辑(当它遵循“导入/导出”语句时)决定输出中包含什么?

7cjasjjr

7cjasjjr1#

我认为你是对的,捆绑包不会包括它,当你捆绑。代码是死代码,应该删除。
但是我认为(如果我错了请纠正我),当库的使用者使用npm install时,他们必须下载package.json中的所有内容来解决它的依赖关系,至少这是我的理由。

o7jaxewo

o7jaxewo2#

根据Webpack文档,Webpack从entry point开始生成一个dependency graph,通常是index.js,如果你使用像create-react-app这样的东西,它会生成一个包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我的应用程序:
1.在已安装的裸计算机上按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

1.通过npm i axios安装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

什么都没有改变!
1.从"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警告!
1.使用其函数之一,例如get method only:

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
    • 结论**:

如果我们不在应用中使用软件包,它就不会进入最终构建版本。

    • 注:**

虽然额外的包不会影响生产,但不要忘记不时地卸载未使用的包。运行npm install仍然会安装package.json中定义的每个包,无论它们是否被使用。因此,加载未使用的包会减慢部署速度,并影响您的队友(他们也需要运行npm install!!)。
Reference

相关问题