How vite is compatible with lower version browsers

One 、 problem

In the use of vue3.2 and vite2.0+ Develop a mobile terminal H5, During the test, it was found that many low version Android mobile browsers have white screens , and ios The model is basically good , as a result of Many lower version browsers do not support native ESM How to import , The solution is given below ：

Two 、 Compatible with native ESM Browser

By default ,Vite The target browser of is able to   Support native ESM script label   and   Support native ESM Dynamic import   Of . As a reference ,Vite Use this  browserslist  As a query standard ：

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

3、 ... and 、 Solution  

Step one ：  vite.config.ts in  build.target  Configuration item   Specify the build target as  es2015

Step two ：  Through plug-ins  @vitejs/plugin-legacy  To automatically generate traditional browsers chunk And its corresponding ES Language characteristics polyfill. Compatible version chunk Only when native is not supported ESM Load on demand in your browser .

1、 install @vitejs/plugin-legacy

yarn add @vitejs/plugin-legacy -D

2、 To configure  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'
  }
})

  Four 、 Packaging inspection

Check the packaged dist Inside index.html You know ,script There are two ways to introduce , Check that the current browser supports native ESM when , load <script type="module">, For lower version browsers, it will load <script nomodule> Corresponding js.

 （ End ）

reference ：

Build the production version | Vite Official Chinese documents ;

Remember a vite2.x Packaging optimization process - SegmentFault Think no

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