浏览器兼容与 Polyfill 治理：Feature Detection、Core‑JS 与差异化构建

浏览器兼容与 Polyfill 治理：Feature Detection、Core‑JS 与差异化构建技术背景不同浏览器与设备的特性支持差异较大。通过特性检测（Feature Detection）与差异化构建（modern/legacy），结合 Core‑JS 按需注入与 Polyfill 分层，可在保证兼容性的同时最小化体积与性能损耗。核心内容特性检测与按需加载<script> (function(){ var supportsModule = 'noModule' in document.createElement('script'); var script = document.createElement('script'); if (supportsModule) { script.type = 'module'; script.src = '/js/app.modern.js'; } else { script.noModule = true; script.src = '/js/app.legacy.js'; } document.head.appendChild(script); })(); </script> Core‑JS 精准注入（Babel）// babel.config.json { "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }] ] } 差异化构建（Vite/Rollup 思路）- 生成 modern 与 legacy 两套产物，modern 使用 ESM 与较少 Polyfill，legacy 使用 SystemJS/UMD 与更多 Polyfill 兼容性监控与错误采集window.onerror = function(msg, src, line, col, err) { navigator.sendBeacon('/compat/errors', JSON.stringify({ msg, src, line, col, stack: err?.stack || '' })); }; 技术验证参数在多终端（Chrome/Edge/Safari/Firefox/Android WebView）真实流量：兼容性错误率：下降 40–70%legacy 访问占比：≤ 15%（稳定下降）modern 首屏体积：下降 25–45%应用场景面向全球与多设备的产品与企业内网旧浏览器兼容需求ESM 现代化迁移与包体积优化最佳实践优先特性检测而非 UA 检测，避免误判Core‑JS 采用 usage 模式，避免全量注入建立兼容性错误采集与逐步迁移策略