根据浏览器和浏览器版本优化 webpack 包？答案

【问题标题】：Optimized webpack bundle depending on browser and browser version?根据浏览器和浏览器版本优化 webpack 包？
【发布时间】：2018-02-11 09:26:26
【问题描述】：

所以我知道 webpack 提供了一个 bundle.js，它拥有从 ECMA2015、jsx 到 ECMA5 的所有 Babel 转换。此文件比原始文件大 n 倍，可与任何浏览器兼容。但是有些浏览器支持很多转译功能，所以在这种情况下，额外的下载/运行量是一种浪费。你知道 webpack 是否有能力为任何浏览器/版本优化服务/创建不同的包？

【问题讨论】：

标签： reactjs webpack babeljs webpack-dev-server webpack-2

【解决方案1】：

好吧，您可以创建不同的捆绑包，但您将如何为它们提供服务？通常捆绑包是预先构建的，而不是即时构建的，因此您所要求的应该基于浏览器即时完成。我现在能想到的一种接近您所要求的方法是使用 nodeJS 在基于 User-agent 的 GET bundle.js 上提供不同的预构建包。也许其他人有其他想法！

【讨论】：

【解决方案2】：

你可以使用@babel/preset-env，这正是为了避免不必要的polyfills。保留 Chrome 41 以便让 google indexer 正确抓取您的应用程序。 useBuiltIns 成功了。

您可以取消注释调试行以查看发生了什么。

在你的 .babelrc 中，添加

{ "presets": [
          ["@babel/preset-env", { 
                //"debug": true, 
                "targets": {
                    "browsers": [
                        "> 1%",
                        "last 2 versions",
                        "chrome 41",
                        "ie >= 9",
                        "safari >= 7"
                    ]
                },
            "useBuiltIns": 'usage'
          }]
]}

【讨论】：