Lesson 13 / 31

Targeting Modern vs Legacy Browsers

Set browser targets with browserslist so preset-env transpiles only what your users' browsers actually need.

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 very old browsers can add 20-30% to bundle size. For modern targets you often skip transpilation almost entirely, saving kilobytes.