6.2. Production-режим и браузерная поддержка

Для начала давайте рассмотрим, что происходит при вводе команды npm run build после сборки проекта в production mode.

Код целиком минимизирован, его крайне сложно или даже невозможно прочитать.

Полностью минимизированный бандл
Полностью минимизированный бандл

Если есть дополнительные оптимизации, например, уменьшены размеры шрифтов — это применится. Но сейчас оптимизации не применялись, поэтому в консоли после сборки мы получаем предупреждение.

Webpack предупреждает нас о том, что можно оптимизировать подключение шрифтов в проекте с помощью import
Webpack предупреждает нас о том, что можно оптимизировать подключение шрифтов в проекте с помощью import

Особенности режима

  1. Работает медленнее, чем режим разработки. Однако оптимизирует код, делая его чище: удаляет комментарии, сжимает код и изображения.
  2. Применяет ряд оптимизаций для уменьшения общего размера всех файлов: картинок, шрифтов, аудио и видео.
  3. Показывает сообщения о проблемах. Но в большинстве случаев не объясняет способы их решения, если ошибки не связаны с пропущенной установкой нужного пакета.

Production-режим сложнее, чем кажется. Собирая проект, мы ожидаем, что наш код и файлы будут собраны и подключены автоматически (что и происходит), а при деплое приложение будет быстрым и оптимизированным. Отчасти это так, но без нашего вмешательства большой разницы не будет. Это всё равно, что использовать готовый конфиг, появляющийся в результате выполнения команды npx webpack init.

Поддерживаемые браузеры после сборки, Browserslist

Browserslist — вспомогательный инструмент, благодаря которому можно писать целевые (поддерживаемые) браузеры нашего приложения с использованием интуитивно понятного синтаксиса.

Его синтаксис можно посмотреть в репозитории самого проекта.

При инициализации готового конфига (webpack init) вы могли заметить, что у нас появляется файл.browserslistrc.

В нём в большинстве случаев размещена подобная запись:

last 2 years
> 1%
not dead

Она говорит о том, что проекту нужны браузеры, вышедшие на рынок за последние два года, у которых более 1% пользователей и которые не являются «мёртвыми», как IE.

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

«Под капотом» тот же Babel использует Browserslist, собирая проект под указанные в browserslistrc браузеры.

Чем новее браузеры пользователей, тем меньше будет весить итоговый бандл, и проект тоже будет быстрее загружаться. А достигается это за счёт использования production-режима с Browserslist.

Важно помнить, что оптимизация не гарантирует отсутствие багов и ошибок.