为什么 webpack 4 包含单个命名导入的整个文件？答案

【问题标题】：why does webpack 4 include the whole file for single named import?为什么 webpack 4 包含单个命名导入的整个文件？
【发布时间】：2020-09-21 21:33:23
【问题描述】：

给定以下两个文件：

//a.js
export const X = /*#__PURE__*/ "X";

const a = function () {
  return "About a!";
};
a.foo = function () {
  return "foo";
};
export default a;

和

//main.js
import { X } from "./a";
import { Y } from "./b";

console.log(X, Y);

我已经添加了

"sideEffect": false 到 package.json
optimization.usedExports: true 到 webpack.config.js

但运行 webpack -p 仍将整个 a.js 文件包含在包中。汇总仅包括来自a.js (demo) 的X

删除a.foo 定义“修复”了问题，但不是演示存储库之外的解决方案。我已经多次阅读tree-shaking 文档页面，阅读[无数关于在 webpack 问题跟踪器上摇晃的问题，我仍然无法弄清楚以下内容：

为什么X 上的/*#__PURE__*/ 标记没有被使用？
有没有办法将 webpack 配置为仅包含来自 a.js 的 X？

您还可以查看 sandbox repository 以查看完整的 webpack 配置和相应的 next.js/react 问题（请参阅 pages/index.jsx），这导致我遇到了这个特定问题。

【问题讨论】：

标签： javascript webpack webpack-4 tree-shaking

【解决方案1】：

我的猜测：export default 会影响摇树。见：https://medium.com/@bluepnume/javascript-tree-shaking-like-a-pro-7bf96e139eb7#43e1

尽量不要删除default。

【讨论】：

正如我的问题中提到的，如果我删除 a.foo= 定义，则默认导出是正确的 tree-shaken。此外，无论是否有 a.foo 定义，导出都正确标记为 /* unused harmony default export */
这篇文章很有意思，我去看看它推荐的插件
文章中描述的两种技术都无法检测到可以解释 a.js 的完整内联的 tree shaking 失败

【解决方案2】：

在 webpack 的问题跟踪器 ~sokra 上提出 issue 后提供了答案：

似乎 terser 中的单个压缩通道不足以压缩此代码。

默认的传递数是 1，但一旦提高到 3，a.js 就不再完全内联。这就是如何以更长的构建时间为代价来实现的。

const TerserWebpackPlugin = require("terser-webpack-plugin");

/** @type {import("webpack").Configuration} */
module.exports = {
    optimization: {
        minimizer: [
            new TerserWebpackPlugin({
                terserOptions: {
                    compress: {
                        passes: 3
                    }
                }
            })
        ]
    }
}

【讨论】：