关于 vite 安卓低版本白屏兼容问题

1. 问题

支付项目中使用了vite打包方式，最近发现在低版本的安卓手机中打开白屏；

发现很多低版本的安卓手机浏览器出现白屏的现象，而ios机型基本上是好的，原因是很多低版本浏览器并不支持原生ESM导入的方式；

默认情况下，Vite 的目标浏览器是指能够 支持原生 ESM script 标签 和 支持原生 ESM 动态导入 的。作为参考，Vite 使用这个 browserslist 作为查询标准：

Chrome >=87

Firefox >=78

Safari >=13

Edge >=88

因此对于低版本的安卓机要做手动兼容；

2. 解决方案

通过插件 @vitejs/plugin-legacy 来自动生成传统浏览器的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

配置 vite.config.ts

plugins: [
  react(),
  pluginLegacy({
    // 向下兼容版本
    targets: ['Chrome 52'],
    additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    polyfills: [
      'es.array.iterator',
      'es.string.includes',
      'es.array.from',
      'es.symbol',
      'es.array.filter',
      'es.promise',
      'es.promise.finally',
      'es/map',
      'es/set',
      'es.array.for-each',
      'es.object.define-properties',
      'es.object.define-property',
      'es.object.get-own-property-descriptor',
      'es.object.get-own-property-descriptors',
      'es.object.keys',
      'es.object.to-string',
      'web.dom-collections.for-each',
      'esnext.global-this',
      'esnext.string.match-all',
    ],
  }),
],