2022年处理不符合转译目标的旧浏览器的更佳方案问询

嘿，针对你提到的2022年替代老旧Browserslist兼容提示工具的需求，我整理了几个当时业内比较流行且靠谱的方案，都是摆脱UA依赖、更准确的选择：

1. caniuse-lite + 原生特性检测（首推） #

这应该是2022年最受推崇的方案，完全抛弃了对User Agent字符串的依赖，转而直接检测浏览器的实际能力——毕竟UA可以被伪造，而特性检测是实打实的判断。

• 核心逻辑：
  1. 从你的项目构建配置（比如Browserslist、tsconfig）里提取必须支持的核心特性（比如ES2018的Promise.prototype.finally、Object spread，或是CSS Grid这类布局特性）；
  2. 在页面加载的最早期（最好内联在<head>里），用极简的代码检测这些特性是否存在；
  3. 如果检测不通过，直接跳转至「最低系统要求」页面，避免加载无用代码。
• 示例代码：

  // 检测ES2018及必要Web API的支持情况
  function isBrowserCompatible() {
    return (
      // ES2018特性
      typeof Promise.prototype.finally === 'function' &&
      typeof Object.values === 'function' &&
      // 必要Web API
      'IntersectionObserver' in window &&
      'fetch' in window
    );
  }
  
  // 页面加载前执行检测
  if (!isBrowserCompatible()) {
    window.location.replace('/minimum-system-requirements');
  }
  

• 优势：caniuse-lite的数据更新及时，能精准匹配你项目的兼容范围，而且特性检测的准确率远超UA判断。

2. 升级后的browserslist-useragent-regexp #

如果你还是倾向于基于UA判断，2022年的browserslist-useragent-regexp已经做了大幅更新，解决了旧版本UA匹配不准确的问题：

• 它会根据你的Browserslist配置（比如> 0.5%, last 2 versions, Firefox ESR）自动生成适配现代浏览器UA的正则表达式，能正确识别Chromium内核的Edge、新版Chrome等的UA格式；
• 用法简单，生成正则后，前端只需匹配当前浏览器的UA，不匹配则触发提示。

3. 定制化Modernizr #

2022年的Modernizr支持按需打包，你可以只引入需要检测的特性模块，体积极小。它封装了大量常见特性的检测逻辑，不用自己手写原生检测代码：

• 比如你需要检测ES6模块、WebGL 2.0等特性，只需在构建时选择对应的检测项，然后通过Modernizr.es6modules、Modernizr.webgl2这类属性判断兼容性；
• 适合不想自己写检测逻辑、又需要精准判断的场景。

额外最佳实践 #

• 把兼容性检测代码放在页面最顶部，甚至内联在HTML的<head>中，避免加载大量不兼容代码后才提示用户，提升用户体验；
• 极端场景下可以结合特性检测+UA辅助判断，比如某些极老浏览器连基本的JS语法都不支持，这时UA判断可以作为兜底方案。

内容的提问来源于stack exchange，提问作者oravecz