时间戳

首页 > 解决方案 > Webpack 摇树在包之间不起作用

javascript - Webpack 摇树在包之间不起作用

问题描述

晚上好！

几天来，我一直在尝试在不同的软件包之间进行摇树操作。

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

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

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

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

核心包

核心包

请注意，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 的指南，但我不确定缺少什么。

相关问题：

标签： javascriptwebpackbundler

解决方案

推荐阅读