Браузерный таргет

Браузерный таргет (Browser Target) — это механизм определения набора браузеров, для которых должен быть подготовлен итоговый код приложения. На основании этой информации Parcel автоматически принимает решения о необходимости транспиляции JavaScript, преобразования CSS, добавления полифиллов и выбора оптимального синтаксиса для выходных файлов.

Главная цель браузерного таргета заключается в создании максимально современного кода для поддерживаемых браузеров при сохранении совместимости с более старыми платформами.

Parcel анализирует указанные целевые браузеры и формирует сборку, которая будет корректно работать в обозначенной среде выполнения.

Зачем нужен браузерный таргет

Современный JavaScript развивается очень быстро. Многие возможности языка появляются раньше, чем получают поддержку во всех браузерах.

Например:

const user = {
  name: "Alex",
  address: {
    city: "Almaty"
  }
};

console.log(user.address?.city);

Оператор опциональной последовательности (?.) поддерживается современными браузерами, но отсутствует в старых версиях.

Если приложение должно работать только в актуальных версиях браузеров, Parcel может оставить такой код без изменений.

Если требуется поддержка старых браузеров, Parcel автоматически преобразует код:

console.log(
  user.address == null
    ? undefined
    : user.address.city
);

Таким образом достигается баланс между:

  • производительностью;
  • размером бандла;
  • совместимостью;
  • удобством разработки.

Система Targets в Parcel

В Parcel термин Target обозначает конечную среду, для которой создается сборка.

Существует несколько разновидностей таргетов:

  • браузеры;
  • Node.js;
  • Electron;
  • библиотечные сборки;
  • пользовательские цели.

Для веб-приложений чаще всего используется браузерный таргет.

Parcel может одновременно создавать несколько вариантов сборки:

{
  "targets": {
    "modern": {
      "context": "browser"
    },
    "legacy": {
      "context": "browser"
    }
  }
}

Каждый таргет может иметь собственные параметры совместимости.

Browserslist как источник информации

Для определения поддерживаемых браузеров Parcel использует стандарт Browserslist.

Browserslist представляет собой универсальный формат, который понимают многие инструменты экосистемы Jav * aScript:

  • Parcel;
  • Babel;
  • Autoprefixer;
  • PostCSS;
  • ESLint;
  • Stylelint.

Обычно настройки располагаются в файле:

{
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "not dead"
  ]
}

Либо в отдельном файле:

.browserslistrc

Содержимое:

> 0.5%
last 2 versions
not dead

Parcel автоматически обнаруживает эти настройки и использует их во время сборки.

Наиболее распространенные запросы Browserslist

Поддержка последних версий браузеров

last 2 versions

Означает поддержку двух последних версий каждого популярного браузера.

Популярные браузеры

> 1%

Включаются браузеры с долей рынка более одного процента.

Исключение устаревших браузеров

> 0.5%
not dead

Параметр:

not dead

исключает браузеры, официально снятые с поддержки.

Исключение Internet Explorer

> 0.5%
not IE 11

или

not ie <= 11

Только современные браузеры

last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versions

Такой набор часто используется для внутренних корпоративных проектов.

Влияние браузерного таргета на JavaScript

Parcel анализирует синтаксис исходного кода и сравнивает его с возможностями браузеров из Browserslist.

Стрелочные функции

Исходный код:

const sum = (a, b) => a + b;

Для старых браузеров может быть сгенерирован вариант:

var sum = function(a, b) {
  return a + b;
};

Классы

Исходный код:

class User {
  constructor(name) {
    this.name = name;
  }
}

Для старых окружений Parcel выполнит преобразование в совместимую форму.

Async/Await

Исходный код:

async function loadData() {
  const response = await fetch("/api");
  return response.json();
}

При необходимости будет создан код на основе генераторов и вспомогательных функций.

Optional Chaining

Исходный код:

user?.profile?.email

Для старых браузеров преобразуется в цепочку проверок.

Nullish Coalescing

Исходный код:

const value = input ?? "default";

После транспиляции:

const value =
  input !== null && input !== undefined
    ? input
    : "default";

Влияние браузерного таргета на CSS

Настройки браузеров влияют не только на JavaScript, но и на CSS.

Parcel использует встроенные механизмы обработки стилей и способен автоматически добавлять необходимые префиксы.

Пример Flexbox

Исходный код:

.container {
  display: flex;
}

Для старых браузеров результат может содержать дополнительные свойства:

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Пример User Select

Исходный код:

.card {
  user-select: none;
}

Результат:

.card {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

Все решения принимаются автоматически на основе списка браузеров.

Влияние на размер бандла

Чем больше браузеров необходимо поддерживать, тем больше становится итоговая сборка.

Причины:

  • дополнительная транспиляция;
  • вспомогательные функции;
  • полифиллы;
  • префиксы CSS;
  • альтернативные реализации возможностей языка.

Например, поддержка только современных браузеров может позволить сохранить:

class Product {}

без преобразований.

Поддержка старых браузеров приведет к генерации значительно более объемного кода.

В результате:

Поддержка Размер сборки
Современные браузеры Меньше
Старые браузеры Больше

Разделение на modern и legacy сборки

Крупные проекты часто создают две версии приложения:

Modern

Для современных браузеров:

{
  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Safari versions"
  ]
}

Legacy

Для старых браузеров:

{
  "browserslist": [
    "> 0.5%",
    "not dead",
    "ie 11"
  ]
}

Современные браузеры получают минимально обработанный код, а устаревшие — совместимую версию.

Такой подход позволяет улучшить:

  • скорость загрузки;
  • производительность;
  • показатели Lighthouse;
  • пользовательский опыт.

Настройка таргетов через package.json

Parcel позволяет явно описывать цели сборки.

Пример:

{
  "targets": {
    "default": {
      "context": "browser",
      "engines": {
        "browsers": [
          "> 0.5%",
          "last 2 versions"
        ]
      }
    }
  }
}

Поле:

"engines"

определяет требования к среде выполнения.

Использование нескольких таргетов

В одном проекте может существовать несколько вариантов сборки.

Пример:

{
  "targets": {
    "modern": {
      "context": "browser",
      "engines": {
        "browsers": [
          "last 2 Chrome versions"
        ]
      }
    },
    "legacy": {
      "context": "browser",
      "engines": {
        "browsers": [
          "ie 11"
        ]
      }
    }
  }
}

После сборки создаются отдельные версии ресурсов для разных платформ.

Проверка поддерживаемых браузеров

Для анализа Browserslist существует специальная утилита:

npx browserslist

Результат может выглядеть следующим образом:

chrome 125
chrome 124
firefox 126
safari 17.5
edge 125

Такой список показывает реальные браузеры, которые будут использоваться Parcel для определения совместимости.

Браузерный таргет и полифиллы

Транспиляция решает проблему синтаксиса, но не обеспечивает поддержку отсутствующих API.

Например:

Array.prototype.flat()

или

Promise

могут отсутствовать в старых браузерах.

В подобных случаях требуются полифиллы.

Пример подключения:

import "core-js/stable";

Parcel учитывает целевые браузеры и может исключать ненужные преобразования, если поддержка уже присутствует.

Оптимизация для современных браузеров

Если проект ориентирован исключительно на актуальные версии браузеров, можно использовать более строгие настройки.

Пример:

{
  "browserslist": [
    "last 1 Chrome version",
    "last 1 Firefox version",
    "last 1 Safari version"
  ]
}

Преимущества такого подхода:

  • меньший размер бандла;
  • меньше транспиляции;
  • более быстрые сборки;
  • улучшенная производительность выполнения;
  • использование современных возможностей языка без ограничений.

Типичные ошибки при настройке браузерного таргета

Слишком широкая поддержка

Конфигурация:

> 0.01%

может включать большое количество устаревших браузеров.

Следствия:

  • увеличение размера сборки;
  • ухудшение производительности;
  • более сложная отладка.

Отсутствие Browserslist

Если настройки не заданы явно, могут использоваться значения по умолчанию, которые не всегда соответствуют требованиям проекта.

Путаница между транспиляцией и полифиллами

Транспиляция преобразует синтаксис:

async/await

Полифиллы реализуют отсутствующие возможности среды:

Promise

Это разные механизмы совместимости.

Поддержка Internet Explorer без необходимости

Во многих современных проектах поддержка IE приводит к значительному увеличению объема кода без практической пользы.

Перед добавлением подобных браузеров в список целей необходимо оценивать реальные требования аудитории.

Рекомендации по выбору браузерного таргета

Для публичных веб-приложений часто используется конфигурация:

> 0.5%
last 2 versions
not dead

Для корпоративных систем с контролируемой инфраструктурой:

last 2 Chrome versions

Для проектов с обязательной поддержкой старых платформ:

> 0.5%
not dead
ie 11

Грамотно настроенный браузерный таргет позволяет Parcel автоматически находить оптимальный баланс между современными возможностями JavaScript, совместимостью браузеров и размером итоговой сборки.

Оглавление