vite如何兼容低版本浏览器

一、问题

在使用vue3.2和vite2.0+开发一个移动端H5，测试时发现很多低版本的安卓手机浏览器出现白屏的现象，而ios机型基本上是好的，原因是很多低版本浏览器并不支持原生ESM导入的方式，下面给出解决方案：

二、兼容原生ESM的浏览器

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

• Chrome >=87
• Firefox >=78
• Safari >=13
• Edge >=88

三、解决方案 

步骤一：  vite.config.ts里 build.target 配置项 指定构建目标为 es2015

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

1、安装@vitejs/plugin-legacy

yarn add @vitejs/plugin-legacy -D

2、配置 vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['chrome 52'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        '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'
      ]
    }    
  ],
  build: {
    target: 'es2015'
  }
})

 四、打包检验

查看打包出来的dist里的index.html可知，script的引入方式有两种，检测当前浏览器支持原生ESM时，加载<script type="module">，而对于低版本的浏览器会加载<script nomodule>相应的js。

 （完）

参考文献：

构建生产版本 | Vite 官方中文文档；

记一次vite2.x打包优化过程 - SegmentFault 思否

https://github.com/vitejs/vite/tree/main/packages/plugin-legacy