为什么你的前端代码越写越慢？可能是这行配置出了问题

browserslist 是一个用于配置目标浏览器和 Node.js 版本的配置文件，广泛应用于前端工具链中，如 Babel、Autoprefixer、PostCSS 等。通过定义目标浏览器范围，开发者可以确保他们的代码能够在指定的浏览器环境中正常运行，同时避免不必要的兼容性处理，从而优化构建输出。本文将详细介绍 browserslist 的使用场景、配置方式、查询语法、实际应用以及*实践。

一、browserslist 的背景与作用

在前端开发中，浏览器的兼容性是一个不可忽视的问题。不同的浏览器对 JavaScript、CSS 和 HTML 的支持程度不同，开发者需要根据目标用户群体的浏览器使用情况，对代码进行兼容性处理。然而，过度兼容会导致代码冗余，增加构建体积，影响性能。

browserslist 的出现解决了这一问题。它允许开发者通过简单的配置文件或查询字符串，定义目标浏览器范围。前端工具会根据这些配置，自动调整代码的兼容性处理策略。例如：

• Babel：根据目标浏览器范围，决定是否需要将 ES6+ 语法转换为 ES5。
• Autoprefixer：根据目标浏览器范围，自动添加 CSS 前缀。
• PostCSS：根据目标浏览器范围，优化 CSS 输出。

通过 browserslist，开发者可以确保代码在目标浏览器中正常运行，同时避免不必要的兼容性处理，从而提高构建效率和代码质量。

二、browserslist 的配置方式

browserslist 的配置可以通过以下几种方式实现：

1. 在 package.json 中配置
   在 package.json 文件中添加 browserslist 字段，定义目标浏览器范围。例如：

   {
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not dead"
    ]
   }

2. 创建 .browserslistrc 文件
   在项目根目录下创建 .browserslistrc 文件，每行定义一个查询条件。例如：

   > 1%
   last 2 versions
   not dead

3. 在代码中动态配置
   可以通过 browserslist 的 API 在代码中动态配置目标浏览器范围。例如：

   const browserslist = require('browserslist');
   const browsers = browserslist('> 1%, last 2 versions, not dead');

三、browserslist 的查询语法

browserslist 支持丰富的查询语法，以下是一些常用的查询条件：

1. 市场份额

   • > 1%：选择全球使用率大于 1% 的浏览器。
   • > 5% in US：选择美国使用率大于 5% 的浏览器。

2. 浏览器版本

   • last 2 versions：选择每个浏览器的*两个版本。
   • Firefox > 50：选择 Firefox 版本大于 50 的浏览器。

3. 浏览器状态

   • not dead：排除已停止更新的浏览器。
   • unreleased versions：选择尚未正式发布的浏览器版本。

4. 特定浏览器

   • iOS 12：选择 iOS 12 的浏览器。
   • Chrome 80：选择 Chrome 80 的浏览器。

5. 自定义数据

   • extends browserslist-config-myconfig：使用自定义的 browserslist 配置。

四、browserslist 的实际应用

以下是一些常见的应用场景：

1. Babel 配置
   在 Babel 配置中，可以通过 browserslist 定义目标浏览器范围，从而决定是否需要转换 ES6+ 语法。例如：

   {
    "presets": [
      ["@babel/preset-env", {
        "targets": "> 0.25%, not dead"
      }]
    ]
   }

2. Autoprefixer 配置
   在 PostCSS 配置中，可以通过 browserslist 定义目标浏览器范围，从而决定是否需要添加 CSS 前缀。例如：

   module.exports = {
    plugins: [
      require('autoprefixer')({
        overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead']
      })
    ]
   };

3. Webpack 配置
   在 Webpack 配置中，可以通过 browserslist 定义目标浏览器范围，从而优化构建输出。例如：

   module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
   };

五、browserslist 的*实践

1. 根据用户群体配置
   根据目标用户群体的浏览器使用情况，选择合适的查询条件。例如，如果目标用户主要使用*版本的 Chrome 和 Firefox，可以配置为 last 2 versions。

2. 定期更新配置
   浏览器的市场份额和版本更新较快，建议定期更新 browserslist 配置，以确保代码的兼容性。

3. 避免过度兼容
   过度兼容会导致代码冗余，增加构建体积。建议根据实际需求，选择合适的查询条件。

4. 使用默认配置
   如果没有特殊需求，可以使用默认配置，例如 defaults，它会自动选择全球使用率大于 0.5% 的浏览器。

5. 测试兼容性
   在发布前，使用工具（如 BrowserStack 或 Sauce Labs）测试代码在目标浏览器中的兼容性。

六、总结

browserslist 是一个强大的工具，通过简单的配置，可以帮助开发者优化代码的兼容性处理，提高构建效率和代码质量。无论是 Babel、Autoprefixer 还是 PostCSS，browserslist 都发挥着重要作用。通过合理配置和定期更新，开发者可以确保代码在目标浏览器中正常运行，同时避免不必要的兼容性处理。希望本文能够帮助你更好地理解和使用 browserslist，从而提升前端开发的效率和质量。