📖 簡介

@vitejs/plugin-legacy?是 Vite 官方提供的兼容性插件，專門用于為現代瀏覽器構建的應用程序提供對舊版瀏覽器的支持。該插件通過自動生成兼容性代碼和 polyfill，確保您的應用能夠在 IE 11 等舊版瀏覽器中正常運行。

核心價值

• 向后兼容: 讓現代 Web 應用支持舊版瀏覽器
• 自動優化: 智能識別需要兼容的代碼并自動處理
• 性能平衡: 在兼容性和性能之間找到最佳平衡點
• 零配置: 開箱即用，最小化配置復雜度

? 主要特性

1. 自動 Polyfill 注入

• 自動檢測目標瀏覽器所需的 polyfill
• 智能按需加載，避免不必要的代碼體積增加
• 支持?core-js?和?regenerator-runtime

2. 雙重構建策略

• 現代版本: 使用現代 JavaScript 特性，體積更小，性能更好
• 兼容版本: 包含所有必要的 polyfill 和轉換代碼

3. 智能瀏覽器檢測

• 基于?@babel/preset-env?的瀏覽器目標配置
• 支持自定義瀏覽器支持范圍
• 自動生成?.browserslistrc?配置

4. 條件加載

• 現代瀏覽器加載現代版本代碼
• 舊版瀏覽器自動降級到兼容版本
• 無縫的用戶體驗切換

🚀 安裝與配置

安裝依賴

npm install @vitejs/plugin-legacy --save-dev

基礎配置

import { defineConfig } from "vite";
import legacy from "@vitejs/plugin-legacy";export default defineConfig({plugins: [legacy({targets: ["defaults", "not IE 11"],}),],
});

完整配置示例

import { defineConfig } from "vite";
import legacy from "@vitejs/plugin-legacy";export default defineConfig({plugins: [legacy({// 目標瀏覽器配置targets: ["ie >= 11"],// 額外的 polyfilladditionalLegacyPolyfills: ["regenerator-runtime/runtime"],// 渲染 polyfillrenderLegacyChunks: true,// 現代瀏覽器支持modernTargets: ["defaults", "not IE 11"],// 外部 polyfillexternal: ["core-js"],// 忽略特定文件ignoreBrowserslistConfig: false,// 核心 polyfill 配置corejs: {version: 3,proposals: true,},}),],
});

🔧 配置選項詳解

targets

指定需要支持的瀏覽器版本，支持以下格式：

// 字符串數組
targets: ['ie >= 11', 'chrome >= 60']// 對象格式
targets: {ie: '11',chrome: '60',firefox: '55'
}// 使用 browserslist 查詢
targets: ['> 1%', 'last 2 versions', 'not dead']

additionalLegacyPolyfills

添加額外的 polyfill 包：

additionalLegacyPolyfills: ["regenerator-runtime/runtime","core-js/features/promise","core-js/features/array/find",
];

corejs

配置 core-js 的版本和特性：

corejs: {version: 3,           // 使用 core-js 3.xproposals: true,      // 包含提案階段的特性useBuiltIns: 'usage'  // 按需引入 polyfill
}

📱 使用示例

1. Vue 3 項目配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import legacy from "@vitejs/plugin-legacy";export default defineConfig({plugins: [vue(),legacy({targets: ["ie >= 11"],additionalLegacyPolyfills: ["regenerator-runtime/runtime"],}),],build: {target: "es2015",minify: "terser",},
});

2. React 項目配置

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import legacy from "@vitejs/plugin-legacy";export default defineConfig({plugins: [react(),legacy({targets: ["defaults", "not IE 11"],modernTargets: ["chrome >= 87", "firefox >= 78"],}),],
});

3. 企業級項目配置

import { defineConfig } from "vite";
import legacy from "@vitejs/plugin-legacy";export default defineConfig({plugins: [legacy({targets: ["ie >= 11", "chrome >= 60", "firefox >= 55"],additionalLegacyPolyfills: ["regenerator-runtime/runtime","core-js/features/promise","core-js/features/array/find","core-js/features/object/assign",],corejs: {version: 3,proposals: true,},renderLegacyChunks: true,external: ["core-js"],}),],build: {rollupOptions: {output: {manualChunks: {polyfills: ["core-js", "regenerator-runtime"],},},},},
});

🎯 最佳實踐

1. 目標瀏覽器選擇

// 推薦配置
targets: ["ie >= 11", "chrome >= 60", "firefox >= 55"];// 避免過度兼容
// ? 不推薦
targets: ["ie >= 9"]; // IE 9 支持成本過高// ? 推薦
targets: ["ie >= 11"]; // IE 11 是合理的下限

2. Polyfill 優化

// 按需引入 polyfill
corejs: {version: 3,proposals: false, // 生產環境關閉提案特性useBuiltIns: 'usage'
}// 外部化常用 polyfill
external: ['core-js', 'regenerator-runtime']

3. 構建優化

build: {// 分離 polyfill 到獨立 chunkrollupOptions: {output: {manualChunks: {polyfills: ["core-js", "regenerator-runtime"];}}}
}

?? 注意事項

1. 兼容性限制

• 不支持 IE 10 及以下版本
• 某些現代 Web API 無法完全 polyfill
• CSS 特性兼容性需要額外處理

2. 性能考慮

• 舊版瀏覽器性能下降明顯
• 建議設置合理的瀏覽器支持下限
• 監控實際用戶瀏覽器分布

3. 維護成本

• 需要定期更新 polyfill 版本
• 測試覆蓋多個瀏覽器版本
• 關注瀏覽器市場份額變化

🔮 未來發展趨勢

• 基于用戶實際訪問數據
• 動態調整兼容性策略
• 智能 polyfill 選擇

總結

@vitejs/plugin-legacy?是一個功能強大且易用的兼容性解決方案，它通過智能的構建策略和自動化的 polyfill 管理，讓現代 Web 應用能夠無縫支持舊版瀏覽器。合理使用該插件可以在兼容性和性能之間找到最佳平衡點，為您的項目提供更廣泛的用戶覆蓋。

在選擇使用該插件時，建議根據實際用戶群體和業務需求來確定目標瀏覽器范圍，避免過度兼容導致的性能損失和維護成本增加。

?Vite 插件 @vitejs/plugin-legacy 深度解析：舊瀏覽器兼容指南 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享