如何在加载时检查React浏览器兼容性(通用)以避免空白屏幕

// 检查浏览器是否支持Promise
if (!window.Promise) {
  // 如果不支持Promise，则加载对应的polyfill库
  var script = document.createElement('script');
  script.src = 'https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise';
  document.head.appendChild(script);
}

// 检查浏览器是否支持fetch
if (!window.fetch) {
  // 如果不支持fetch，则加载对应的polyfill库
  var script = document.createElement('script');
  script.src = 'https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch';
  document.head.appendChild(script);
}

// 检查浏览器是否支持ES6的语法特性
if (!Object.entries || !Array.from || !Array.prototype.includes) {
  // 如果不支持ES6的语法特性，则加载对应的polyfill库
  var script = document.createElement('script');
  script.src = 'https://cdn.polyfill.io/v2/polyfill.min.js?features=es6';
  document.head.appendChild(script);
}

// 兼容性检查模块 browserCompatibility.js
export default function checkBrowserCompatibility() {
  if (!window.Promise) {
    import('https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise');
  }

  if (!window.fetch) {
    import('https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch');
  }

  if (!Object.entries || !Array.from || !Array.prototype.includes) {
    import('https://cdn.polyfill.io/v2/polyfill.min.js?features=es6');
  }
}

// 入口文件 index.js
import checkBrowserCompatibility from './browserCompatibility';

checkBrowserCompatibility().then(() => {
  // 加载React应用程序
  ReactDOM.render(<App />, document.getElementById('root'));
});