Webpack 树摇动在包之间不起作用

晚上好！

几天来我一直在尝试让不同包之间的 tree shake 正常工作。

在进一步讨论之前，我创建了一个最小重现，我将在这篇文章中对此进行解释：https://github.com/Apidcloud/tree-shaking-webpack https://github.com/Apidcloud/tree-shaking-webpack

我还在 webpack repo 上提出了一个问题：https://github.com/webpack/webpack/issues/8951 https://github.com/webpack/webpack/issues/8951

为了简单起见，该示例仅使用 webpack。巴别塔没有被使用.

上面的示例有两个包，都有各自的包：

• core- 导出 2 个函数，cube and unusedFn
• consumer- 进口cube from core并导出自己的函数，consumerFn

核心包

注意square函数未导出到index.js文件。这是一种知道 Tree Shaking 确实在内部起作用的方法core至少，因为它不包含在最终捆绑包中（这是正确的）。

消费包

正如你所看到的，只有cube正在进口自core。然后它导出自己的函数（consumerFn）消耗cube.

Problem

问题是consumer捆绑包包括所有来自core捆。也就是说，它包括unusedFn当它不应该时，会导致更大的捆绑。

最终，目标是在具有多个包的单一存储库中执行相同的操作。如果每个包都捆绑了其他包的所有内容，那么拥有它们就没有意义。目标是仅捆绑每个包所需的内容。

Using optimizationBailout I can see that ModuleConcatenation plugin is issuing some warning messages. I also used --verbose flag:

这是我的webpack.config.js:

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    core: './src/index.js',
    consumer: './consumer/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    // for simplicity sake I removed the UMD specifics here.
    // the problem is the same, with or without it.
  },
  optimization: {
    usedExports: true,
    sideEffects: true
  },
  stats: {
    // Examine all modules
    maxModules: Infinity,
    // Display bailout reasons
    optimizationBailout: true
  }
};

我也有"sideEffects": false in the package.json.

我浏览了 webpack 的guide https://webpack.js.org/guides/tree-shaking/也是，但我不确定缺少什么。

相关问题：

• webpack-3-babel-and-tree-shaking-不工作 http://stackoverflow.com/questions/47663486/webpack-3-babel-and-tree-shaking-not-working?rq=1
• webpack-包括-final-bundle-not-tree-shaking中未使用的导出 http://stackoverflow.com/questions/48599352/webpack-including-unused-exports-in-final-bundle-not-tree-shaking