在 browserslist 中，具有不同的环境配置有什么意义？

Question

简介：browserslist是一个配置，用于让其他开发人员、包、插件等了解您的项目支持哪些浏览器。这是通过查询来完成的，并且有一种方法可以将这些查询拆分到不同的环境中。

{
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
}

假设我使用开发配置支持的 JavaScript 函数，但生产配置不支持该函数。

我的问题是：如果我发现生产配置中可能存在在开发早期未检测到的错误，那么在生产和开发之间分割配置有什么意义呢？（是因为它可以加快编译时间还是有一些类似的优势？）

Answer 1

生产：这将缩小您的代码以实现快速的网络性能，并具有内置生产功能

例如。在您的 CSS 样式中，当您决定部署项目时，您应该将所有 CSS 代码包装在一个文件或MiniCssExtractPlugin中

开发：这将提高构建项目时的生产力

例如。你应该有一个DevServer和StylingLoaders来在DOM上放置样式 ，当你部署项目时，你可以实现Css 插件来创建一个文件

您的生产配置会出现错误，因为它可能需要更新一些依赖项或 npm 包