javascript - 如何使用 Webpack 5 对 Node 模块使用 tree shaking？

Question

我想提升我的网站性能。我最近在 lighthouse 看到一个关于未使用的 javascript 的错误。

我检查了包，显然那些未使用的 javascript 实际上是从我下载的其他模块和 Node 包中使用的。例如，@sentry/node 是我正在使用的，但报告显示来自 @sentry/hub 的未使用的 javascript。但我只安装了 @sentry/node 而不是整个 @sentry 包。此外，@sentry/node 正在使用 @sentry/hub，但我没有在我的代码中的任何地方导入 @sentry/hub(我认为这是导致问题的原因)

我已将 "sideEffects": false 包含到我的 package.json 文件中，但似乎没有任何效果

Answer 1

您可以尝试解构，只针对您正在使用的对象(或函数)。

例如

import { Component } from 'react';

因此，对于你...

import { yourFunction } from `@sentry/node`;

或者简单地获取您正在使用的代码@sentry/node。 🤷‍♂️

否则，显示你的代码:

• package.json
• webpack.config.js
• 您的“索引”文件(您导入脚本和其他文件的地方)
• 你导入@sentry/node的文件