🚨 Глупая ошибка в проекте, из-за которой может страдать перфоманс

Практически во всех компаниях, куда я приходил, была эта проблема.

Когда пришёл в 🛍 OZON и начал изучать проект — там опять была эта ошибка.

Эта проблема — неверный список поддерживаемых браузеров.

Так уж сложилось, что большинство сборщиков зависят от файлика browserslist.

В нём указывается для каких браузеров нужна поддержка. На основе этого файла babel и autoprefixer будут решать, что делать с кодом.

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

⚠️ Больше кода — хуже перфоманс. Часто встречаю запись last 2 versions

Такая запись тянет за собой поддержку 🌐Internet Explorer, который уже давно мертв.

В 🛍 OZON была ситуация, когда раньше нужна была поддержка какого-то легаси браузера, но со временем потребность отпала, а файлик изменить забыли.

Лучше будет указать:

➡️ 0.25%, not op_mini all, not dead

или просто

➡️ defaults

Но ещё лучше будет поступить так:

1️⃣ Узнать с каких браузеров пользователи заходят на ваш сайт (сходить к менеджеру, посмотреть аналитику)

2️⃣ Поправить список браузеров под свои потребности

3️⃣ Вызвать npx browserslist в корне и проверить список браузеров

🔼 Исправив эту ошибку, я сократил суммарный размер бандла в текущем проекте с 2.05Мб до 1.78Мб.

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

———

🧑 • ютуб • задать вопрос