Webpack树因不常用的导入而抖动

Question

我正在尝试为客户端和服务器端开发一个类似Axios的库。我希望webpack的摇树功能能帮助我在客户端使用时从导入中删除死代码，但事实并非如此。以下是代码的一个简短示例：

import http from "http";
import https from "https";
export class FetchClient {
static request(...) { ... }
};
export class FetchServer {
static request(...) { ... }
}

当我只导入FetchClient时，webpack仍然在我的捆绑包中包含"http"one_answers"https"的代码，这使得捆绑包比预期的大100KB，即使它没有在这个代码路径中使用。

我还查看了Axios的代码，它们似乎使用了条件require而不是import(请参阅适配器代码部分(。诀窍是先条件加载，然后异步加载http和https依赖关系吗？在这种情况下，代码仍然在我的捆绑包中，这是我想避免的。

注意：我一直在我的packages.json和模块中使用TerserPlugin(minimizer(，"sideEffects"：false。

编辑：

我设法解决了我的问题，通过使用EnvironmentPlugin webpack插件，并将我的代码拆分为3个文件：2个文件包含每个实现(用于客户端和服务器(，主文件包含以下逻辑：

let adapter = null;
if (process.env.EXEC_ENV === "node") {
adapter = (await import("./adapter/node.http.js")).default;
}
else if (process.env.EXEC_ENV === "web") {
adapter = (await import(/* webpackMode: "eager" */"./adapter/window.fetch.js")).default;
}

我觉得很奇怪，webpack不能自己做到这一点，我认为这就是sideEffects标志的作用。也许静态分析器不够聪明？

Answer 1

import https from "https";

这样导入将导入所有文件。由于它不知道，可能存在一些全局初始化。同时HTTP和HTTPS模块在客户端上将不可用。因此，它必须被激怒。

Axios还包括follow-redirects，包括HTTP和HTTPS模块。

Axios：transport = isHttpsProxy ? httpsFollow : httpFollow;

这不是condition要求，这是conditional返回。adaptor pattern。