Webpack 优化导致 Bundle 大小增加

Posted 2023-02-18

【中文标题】Webpack 优化导致 Bundle 大小增加

【英文标题】：Webpack Optimizations Causing an Increase in Bundle Size

【发布时间】：2021-12-18 22:51:30

【问题描述】：

我注意到查看 Chrome Dev Tools 的 Coverage 工具中的捆绑代码，我的客户端捆绑包中包含很多未使用的代码，因此我对我可以进行的 webpack 优化进行了一些研究，并将这些添加到我的 Webpack配置。

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

添加后，覆盖工具显示大小列大幅减少，未使用代码百分比减少，所以我认为它有效。我还检查了我之前看到的未使用的代码是否已从包中删除。然而，在部署应用程序时，我使用的监控工具显示包大小实际上增加了 2kb。我还尝试使用 Statoscope 插件，它显示捆绑包增加了 2kb。

鉴于似乎删除了未使用的代码并且捆绑包中的总行数也在减少，为什么这可能会增加捆绑包的大小，我有点不知所措。我也尝试将它放在其他应用程序中，并且我看到了相同的模式，其中 Coverage 选项卡显示大小大幅减小，但捆绑包大小实际上越来越大。

当捆绑包的大小实际上在增加时，Coverage 工具是否会显示大小减小？

【参考方案1】：

似乎 webpack-dev-server 在内存中创建了自己的单独捆绑包，这与我的构建脚本生成的捆绑包不同，并且 webpack 在模式为“开发”时默认禁用摇树优化和当模式为“生产”时默认启用。我认为 webpack-dev-server 正在为我的构建脚本生成的 webpack 包提供服务，但它在开发模式下制作了一个包，这导致了我在 Statoscope 分析器和 Chrome Coverage 中看到的包大小存在差异工具。