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

Question

给定以下两个文件:

//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 文件。 Rollup 仅包含来自 a.js ( demo )

的 X

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

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

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

Answer 1

提高issue之后在 webpack 的问题跟踪器上 ~sokra提供了一个答案:

Seems like a single compression pass in terser is not enough to compress this code.

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

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

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