浏览器兼容与 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 模式，避免全量注入建立兼容性错误采集与逐步迁移策略