使用未使用的导入进行 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”和“https”的代码，这使得包比预期的要大约 100KB，即使它没有在此代码路径中使用。

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

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

编辑：

我设法解决了我的问题，使用 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 模块在客户端将不可用。所以它必须是browsify。

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

Axios： transport = isHttpsProxy ? httpsFollow : httpFollow;

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