导致捆绑包大小增加的Webpack优化

Question

我注意到在Chrome Dev工具的覆盖工具中捆绑的代码，有很多未使用的代码包含在我的客户端包中，所以我做了一些关于我可以进行的webpack优化的研究，并将这些添加到我的Webpack配置中。

        optimization: {
            usedExports: true,
            sideEffects: true,
            minimize: true,
            providedExports: true,
        },

添加此代码后，coverage工具显示size列的大小以及未使用代码百分比的减少，因此我假设它是有效的。我还检查了之前看到的未使用的代码是否已从包中删除。但是，在部署应用程序时，我使用的一个监控工具显示包大小实际上增加了2kb。我也尝试过使用Statoscope插件，它显示捆绑包增加了2kb。

我有点不知所措，为什么这会增加捆绑包的大小，因为不使用的代码似乎被删除了，捆绑包中的总行数也在减少。我也尝试过将其放入其他应用程序中，我看到了相同的模式，其中Coverage选项卡显示大小大大减少，但包大小实际上正在变大。

当包的大小实际上在增加时，覆盖率工具会显示大小减小，这是有原因的吗？

Answer 1

看起来，webpack-dev-server创建了自己的独立包存储在内存中，这与我的构建脚本生成的包是不同的，并且当模式为“开发”时，默认情况下禁用了树摇动优化，当模式为“生产”时，默认情况下启用了树摇动优化。我以为webpack-dev-server是在为我的构建脚本生成的捆绑包提供服务，但它是在开发模式下创建的捆绑包，这就是我在Statoscope分析器和Chrome覆盖工具中看到的捆绑包大小的差异。