浏览器支持情况与兼容性策略

作者：陈川阅读数：4940人阅读分类：构建工具

浏览器支持情况

Vite.js 默认支持现代浏览器，包括 Chrome >=87、Firefox >=78、Safari >=13、Edge >=88。这些浏览器原生支持 ES 模块，这是 Vite 开发环境的核心特性。对于生产构建，Vite 使用 Rollup 进行打包，默认情况下会生成兼容现代浏览器的代码。

可以通过 @vitejs/plugin-legacy 插件为旧版浏览器提供支持。该插件会自动生成传统格式的代码（如 SystemJS 或 UMD）和相应的 polyfill。配置示例如下：

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
}

兼容性策略

开发环境策略

在开发环境下，Vite 利用浏览器原生 ES 模块支持实现快速启动和无捆绑开发。当遇到以下情况时需要特别注意：

裸模块导入：Vite 会自动重写裸模块导入（如 import vue from 'vue'）
CSS 预处理器：需要确保开发环境安装了对应的预处理器（如 sass）
Web Workers：使用 ?worker 后缀导入时会自动处理

// 开发环境特有的 worker 使用方式
import Worker from './worker.js?worker'
const worker = new Worker()

生产环境策略

生产构建时，Vite 采用不同的兼容性处理方式：

代码分割：自动处理动态导入
资源处理：小于 4KB 的资源会内联为 base64
CSS 处理：自动提取 CSS 并最小化

可以通过配置显式指定目标浏览器：

// vite.config.js
export default {
  build: {
    target: ['es2015', 'chrome58', 'firefox57', 'safari11']
  }
}

Polyfill 处理

Vite 不自动注入 polyfill，需要手动处理兼容性问题。推荐以下两种方案：

使用 Polyfill.io：动态加载所需 polyfill
手动引入：在入口文件顶部引入特定 polyfill

<!-- 在 index.html 中使用 Polyfill.io -->
<head>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2Ces2016%2Ces2017"></script>
</head>

对于核心功能 polyfill，可以在 vite.config.js 中配置：

export default {
  optimizeDeps: {
    include: ['core-js/stable', 'regenerator-runtime/runtime']
  }
}

CSS 兼容性处理

Vite 内置 PostCSS 支持，可以通过配置文件处理 CSS 兼容性：

自动前缀：使用 autoprefixer
CSS 降级：使用 postcss-preset-env

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-preset-env')({
      stage: 3,
      features: {
        'nesting-rules': true
      }
    }),
    require('autoprefixer')
  ]
}

环境变量兼容

Vite 使用 import.meta.env 代替 process.env，这可能导致旧工具链不兼容。解决方案：

配置 define 选项：替换全局变量
使用兼容插件：转换语法

// vite.config.js
export default {
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
}

第三方库兼容问题

某些传统库可能需要特殊处理：

CommonJS 依赖：Vite 会自动转换大多数 CommonJS 模块
全局变量依赖：需要显式配置

// vite.config.js
export default {
  optimizeDeps: {
    include: ['jquery'],
    exclude: ['vue-demi']
  }
}

对于特别棘手的库，可以创建自定义插件：

// vite.config.js
export default {
  plugins: [{
    name: 'custom-legacy-plugin',
    transform(code, id) {
      if (id.includes('legacy-library')) {
        return transformLegacyCode(code)
      }
    }
  }]
}

测试策略

确保兼容性需要全面的测试方案：

单元测试：使用 Jest 或 Vitest
E2E 测试：使用 Cypress 或 Playwright
跨浏览器测试：使用 BrowserStack 或 Sauce Labs

配置示例：

// vitest.config.js
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'jsdom',
    coverage: {
      provider: 'istanbul'
    }
  }
})

构建目标配置

Vite 支持细粒度控制构建输出：

// vite.config.js
export default {
  build: {
    target: 'esnext',
    polyfillModulePreload: true,
    cssTarget: 'chrome61'
  }
}

对于特殊需求，可以配置多个入口点：

export default {
  build: {
    rollupOptions: {
      input: {
        main: 'index.html',
        legacy: 'legacy.html'
      }
    }
  }
}

渐进式增强策略

推荐采用渐进式增强方案：

功能检测：动态加载 polyfill
条件加载：根据浏览器能力加载不同资源

实现示例：

// 动态加载 polyfill
if (!('fetch' in window)) {
  import('whatwg-fetch').then(() => initApp())
} else {
  initApp()
}

性能优化考量

兼容性处理需要考虑性能影响：

按需 polyfill：避免全量引入
代码分割：分离现代和传统代码
资源预加载：优化加载顺序

配置示例：

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
}

错误处理机制

健壮的兼容性方案需要错误处理：

全局错误捕获：window.onerror
资源加载失败：监听 error 事件
功能降级：提供替代方案

实现示例：

// 全局错误处理
window.addEventListener('error', (event) => {
  if (event.message.includes('SyntaxError')) {
    redirectToLegacyVersion()
  }
})

持续集成方案

自动化兼容性验证流程：

多浏览器测试：集成到 CI 流程
构建验证：检查输出兼容性
性能基准：监控兼容性成本

GitHub Actions 示例：

name: Cross-browser Test
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chrome, firefox, safari]
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm test -- --browser ${{ matrix.browser }}