什么是 Polyfill？如何按需加载 Polyfill？

// 新 API：Array.prototype.includes（ES2016）
[1, 2, 3].includes(2)  // 旧浏览器不支持

// Polyfill
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement) {
    return this.indexOf(searchElement) !== -1
  }
}

// Transpile（Babel 处理语法）
const fn = () => {}  →  var fn = function() {}

// Polyfill（需要运行时补丁）
new Promise(resolve => resolve())  // 旧浏览器没有 Promise

// 全量引入（不推荐）
import 'core-js'  // 引入所有 polyfill，体积大

// 按需引入
import 'core-js/stable/promise'
import 'core-js/stable/array/includes'

// .babelrc
{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",  // 按代码使用情况自动引入
      "corejs": 3
    }]
  ]
}

// 源代码
const arr = [1, 2, 3]
arr.includes(2)
Promise.resolve(1)

// useBuiltIns: "usage" 自动注入
import "core-js/modules/es.array.includes.js"
import "core-js/modules/es.promise.js"

# .browserslistrc
> 0.5%
last 2 versions
not dead
not ie 11

<!-- polyfill.io -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015,es2016"></script>

<!-- 现代浏览器加载 ESM -->
<script type="module" src="modern.js"></script>

<!-- 旧浏览器加载降级版本 -->
<script nomodule src="legacy.js"></script>

// Vite 配置（现代 + 降级）
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['ie >= 11'],
      modernPolyfills: true
    })
  ]
}
// 生成：
// modern.js（现代浏览器，更小）
// legacy.js（旧浏览器，含 polyfill）