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

Question

晚上好！

我已经尝试了几天让不同包之间的树摇动工作。

在继续之前，我已经创建了一个最小的复制，我将在这篇文章中解释它：https : //github.com/Apidcloud/tree-shaking-webpack

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

为简单起见，该示例仅使用 webpack。不使用巴别塔。

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

• core- 导出 2 个函数，cube以及unusedFn
• consumer-cube从core自己的函数中导入和导出，consumerFn

核心包

请注意，square函数未在index.js文件中导出。这是一种core至少可以知道摇树确实在起作用的方法，因为它不包含在最终包中（这是正确的）。

消费套餐

正如你所看到的，只有cube被进口core。然后它导出自己的函数 ( consumerFn) 消费cube。

问题

问题是consumer捆绑包包含捆绑包中的所有内容core。也就是说，它包含unusedFn了不应该包含的内容，从而产生了更大的捆绑包。

最终，目标是在具有多个包的 monorepo 中做同样的事情。如果每个包裹都捆绑了其他包裹的所有东西，那么拥有它们就毫无意义。目标是只捆绑每个包所需的东西。

使用optimizationBailout我可以看到ModuleConcatenation插件发出了一些警告消息。我还使用了--verbose标志：

这是我的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在package.json。

我也浏览了 webpack 的指南，但我不确定缺少什么。

相关问题：

• webpack-3-babel-and-tree-shaking-not-working
• webpack-including-unused-exports-in-final-bundle-not-tree-shaking