Targeting Modern vs Legacy Browsers

Modern targets: less transpilation

If supporting only modern browsers (Chrome 90+, Firefox 88+), Babel skips most transpilation. Modern JavaScript features work natively, reducing bundle size.

Browserslist examples

Use browserslist syntax to define targets. Preset-env reads this and transpiles accordingly.

// Modern SPA: less transpilation
{
  "targets": {
    "browsers": ["last 2 Chrome versions", "last 2 Firefox versions"]
  }
}

// Legacy support: more transpilation
{
  "targets": {
    "browsers": ["IE 11", "iOS >= 9"]
  }
}

Measure bundle impact

Transpiling for IE11 adds 20-30% to bundle size. For modern targets, you often skip transpilation entirely, saving kilobytes.