为什么Webpack会把elliptic bn.js模块包含在我的bundle中？

Question

webpack-bundle-analyzer 显示我的 vendor.js 中包含了 elliptic 和 bn.js，但是这些模块在我的代码中没有被使用，也没有在 package.json 文件中被引用。

npm ls bn.js 的输出为：

├─┬ eslint-import-resolver-webpack@0.8.1
│ └─┬ node-libs-browser@1.1.1
│   └─┬ crypto-browserify@3.11.0
│     └─┬ browserify-sign@4.0.0
│       └── bn.js@4.11.6

- Nikhil Ranjan

---

这是因为包含了使用crypto模块的randomstring模块。如果在前端代码中使用crypto模块，则所有加密函数都会被包含在前端js捆绑包中。 - Nikhil Ranjan

你能告诉我如何解决这个问题吗？因为这导致我的整体捆绑包大小比webpack 1大（其中未包含elliptic和bn.js）。 - Prakash Sharma

很遗憾，无法像“yarn why crypto”这样查询依赖于crypto的包，因为这是使用webpack自动填充nodejs模块的行为。 - Colin D

Answer 1

Webpack会在你的打包文件中包含elliptic和bn.js（以及其他更小的模块），如果你在代码中的某个地方作为依赖导入了crypto。为了避免这些庞大的依赖关系，你可以寻找一个特定的npm模块，它仅提供你所需的功能。例如，我曾经导入crypto来执行以下操作：

const crypto = require('crypto');
const hmac = crypto.createHmac('sha1', buf);

在这种情况下，你可以安装create-hmac模块，并执行以下操作：...

const createHmac = require('create-hmac');
const hmac = createHmac('sha1', buf);

如果你需要一些动力，就把crypto作为依赖项去掉，可以使我们的gzipped捆绑包大小减少150Kb（但是这取决于你使用哪些加密方法）。

- Matt

---

在我的情况下，我在我的代码库中使用了 jsonwebtoken 并导入了相同的依赖项。我可以确认节省很大 :) - Mickaël

即使是像 crypto-random-string 这样微小的依赖，也会通过 crypto 带来大量的叶子依赖 :( - Dima Tisnek

如果你的捆绑包因Mickael提到的“jsonwebtoken”而变得臃肿，那么如果你正在使用它来解码你的jwt令牌，你可以尝试使用“jwt-decode”。 - cYee

你也可以继续使用 jsonwebtoken 并尝试使用 动态导入。在 Next.js 中对我非常有效。 - quickshiftin

Answer 2

这些是你的依赖项的依赖项。例如source

- mic4ael