react项目中js兼容性解决方案

curtain
416 阅读4分钟

问题描述

背景

在生产环境中,部分用户使用搜狐极速浏览器访问新发版的页面时,页面无法正常打开。经过排查,发现这些用户的浏览器内核版本为Chrome80,该版本较旧,不支持现代JavaScript方法String.prototype.replaceAll(),导致页面加载时出现脚本错误。

影响范围

受影响的浏览器:搜狐极速浏览器(Chrome 80内核)

受影响的页面:新发版的所有页面

受影响的用户:使用上述浏览器的生产用户

问题原因

String.prototype.replaceAll()是ES2021引入的新方法,Chrome85及以」上版本才原生支持。Chrome80内核的浏览器在执行包含replaceAll的代码时会抛出TypeError,导致页面脚本中断。

复现步骤

1.使用Chrome80内核的浏览器(如搜狐极速浏览器)

2.访问新发版的页面

3.观察控制台,出现TypeError:replaceAll is not a function错误

4.页面加载失败

优先级

高-影响部分用户正常使用,需尽快修复。

技术方案

1.兼容性处理

使用String.prototype.replace()配合正则表达式替代replaceAll

或使用polyfill兼容低版本浏览器

2.浏览器检测

在页面加载时检测浏览器内核版本,对低版本浏览器给出提示或降级处理

3.构建工具配置

在构建流程中加入Babel等工具,确保代码兼容性

4.测试验证

在Chrome80及以下版本浏览器中测试修复后的页面

市场调研

一、调研市面主流浏览器的版本

国内浏览器内核市场概况（截至2024年）

  1. Chrome 内核（Blink）

    1. 占有率：约 65%-70% （含Chromium内核的二次开发浏览器，如360极速、QQ浏览器等）
    2. 现状：Chrome 80+ 内核已覆盖主流用户，但国内部分浏览器仍基于旧版Chromium（如360安全浏览器兼容模式可能停留在Chrome 70左右）

  2. IE 11（Trident）

    1. 占有率： < 2%
    2. 残存场景：政府/国企网站、老旧企业系统（需强制兼容）
    3. IE11是Windows7/8的默认浏览器,覆盖了大部分 IE用户9

  3. Firefox 54（Gecko）

    1. 占有率： < 1%
    2. 现状：国内用户极少使用旧版Firefox，新版（≥115）占比约3%-5%
    3. Firefox54及以下版本覆盖了约98%的Firefox用户

  4. Safari 10（WebKit）

    1. 占有率：≈5% （主要来自iOS 10设备，目前iOS 15+设备占比超90%）
    2. 风险点：需注意国内低端Android机内置浏览器（如X5内核）的WebKit兼容性问题
    3. Safari 10覆盖了约95%的Safari用户

  5. Edge 16（EdgeHTML）

    1. 占有率：≈0%
    2. 现状：微软已全面转向Chromium内核的新版Edge，旧版已停止支持
    3. Edge 16覆盖了约99%的Edge用户

解决方案

一、现状:

在未解决之前,项目报错TypeError:tableList.replaceAll is not afunction

二、寻找问题

在caniuse.com/?search=rep…网站上查阅发现,replaaceAll的兼容性如下

我们通过navigator.userAgent命令查阅搜狗高速浏览器的内核为CChrome/80.0.3987.87版本,因此搜狗高速浏览器不兼容js的replaceAll方法

三、项目打包配置引入@rsbuild/plugin-babel插件并使用

在项目中下载兼容性需要的依赖包、

npm install @rsbuild/plugin-babel @babel/core --save-dev

import { pluginBabel } from '@rsbuild/plugin-babel';
 plugins: [
     pluginBabel({
      babelLoaderOptions: (config) => {
        // 添加一个插件，比如配置某个组件库的按需引入
        // 配置js的兼容性引入
        config.presets ||= [];
        config.presets.push([
          '@babel/preset-env',
          {
            useBuiltIns: 'usage',
            corejs: 3,
            targets: {
              // 指定需要兼容的浏览器版本
              chrome: '80',
              ie: '11',
              firefox: '54',
              safari: '10',
              edge: '16'
            }
          }
        ]);
      }
    }),
 ]

配置说明

1、当我们兼容chrome内核120版本的时候,发现在搜狗高速浏览器中还是会报错

  targets: {
              // 指定需要兼容的浏览器版本
              chrome: '120'
              // ie: '11',
              // firefox: '54',
              // safari: '10',
              // edge: '16'
            }

2、当我们把其他浏览器的配置加上,发现@babel/preset-env插件是会兼容我们配置的所有内核,当其他版本

需要兼容方法的时候,chrome120内核也能使用了

            targets: {
              // 指定需要兼容的浏览器版本
              chrome: '120',
              ie: '11',
              firefox: '54',
              safari: '10',
              edge: '16'
            }

3、当我们只配置谷歌内核80的时候,js方法兼容到chrome80内核所以页面也能正常访问

            targets: {
              // 指定需要兼容的浏览器版本
              chrome: '80',
              // ie: '11',
              // firefox: '54',
              // safari: '10',
              // edge: '16'
            }

最终我们经过市场调研针对浏览器做了以下兼容性配置

            targets: {
              // 指定需要兼容的浏览器版本
              chrome: '80',
              ie: '11',
              firefox: '54',
              safari: '10',
              edge: '16'
            }
avatar
文章
阅读
粉丝