为什么 webpack 在我的包中包含椭圆 bn.js 模块答案

【问题标题】：Why webpack includes elliptic bn.js modules in my bundle为什么 webpack 在我的包中包含椭圆 bn.js 模块
【发布时间】：2023-03-18 07:15:01
【问题描述】：

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

【问题讨论】：

这是因为包含使用加密模块的随机字符串模块。如果在前端代码中使用了加密模块，则所有加密功能都包含在前端 js 包中。
你能告诉我如何处理这个问题吗？因为这导致我的整体包大小大于 webpack 1（其中不包括 elliptic 和 bn.js）。
不幸的是，没有办法说，例如，“yarn 为什么要加密”并查看哪个包依赖于加密，因为这是使用自动填充 nodejs 模块的 webpack 行为

标签： reactjs webpack

【解决方案1】：

如果您将 crypto 作为依赖项导入代码中的某处，Webpack 会在您的包中包含 elliptic 和 bn.js（以及其他较小的模块）。

为了避免这些巨大的依赖，你可以寻找一个特定的 npm 模块，它提供你需要的功能。

比如我是导入crypto做的；

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

...相反（在这种情况下...），您可以安装create-hmac module，然后执行；

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

如果您需要一些动力；删除 crypto 作为依赖项将我们的 gzip 压缩包大小减少了 150Kb（但 YMMV 取决于您使用的加密方法）。

【讨论】：

就我而言，我在我的代码库中使用了jsonwebtoken，它导入了相同的依赖项。我可以确认节省很重要:)
即使是像crypto-random-string 这样的小部门也会通过crypto 带来大量的叶子部门:(
如果你的包由于 jsonwebtoken 而膨胀，正如 Mickael 所提到的。如果您使用 jwt-decode 解码您的 jwt 令牌，您可以尝试。
您也可以坚持使用jsonwebtoken 并尝试dynamic imports。在 Next.js 中工作对我来说就像一个魅力

【解决方案2】：

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

【讨论】：