Question

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

import http from "http";
import https from "https";

export class FetchClient {
    static request(...) { ... }
};

export class FetchServer {
    static request(...) { ... }
}

当我仅导入FetchClient时，webpack仍在捆绑包中包含“ http”和“ https”的代码，这使捆绑包比预期大100KB，即使该代码路径中未使用该捆绑包。

我也查看了Axios的代码，看来他们使用的是条件 require 而不是 import （请参阅适配器代码部分）。诀窍是有条件地加载，然后异步地加载http和https依赖吗？在那种情况下，代码仍会放在我的捆绑包中，这是我想避免的那种东西。

注意：我一直在我的packages.json和模块中使用TerserPlugin（最小化器），“ 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。

Webpack树摇晃而未使用的导入

1 个答案: