27 марта 2025 г. (изменено: 27 марта 2025 г.)

Канал: @cherkashindev

1 631

🔄 **Обновляем caniuse-lite ** Когда стали использовать реакт, мы взяли стандартный create-react-app, в котором использовался browserslist. Конфиг был стандартный.

 
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Потом мы, конечно, совершенно забыли как работает browserslist, и успешно игнорирывали следующее сообщение при билде.


Browserslist: caniuse-lite is outdated. Please run:

npx update-browserslist-db@latest

Why you should do it regularly: https://github.com/browserslist/update-db#readme

Так в чём проблема? 🤔

caniuse-lite - легковесная версия, той самой базы caniuse.com. Время идёт, появляются новые версии браузеров, а мы используем старую базу, и все наши запросы ">0.2%" работают с браузерами пяти летней давности.

То, есть запрос ">0.2%" выбирал браузеры, у которых доля рынка была больше 0.2% 5 лет назад.

А это значит, что

  • async/await преобразуется в длинную партянку кода в ES5
  • стрелочные функции () => {} заменяются на function() {}
  • никаких let/const, только старокрестьянский var
  • в код попадают ненужные полифилы

В общем, если давно не обновляли caniuse-lite открываем консоль и запускаем:

 
npx update-browserslist-db@latest

Если у вас pnpm монорепозиторий — используйте команду:

 
pnpm up caniuse-lite

Мы обновились и наши жирные бандлы прилично похудели.


407.31 KB (-100.86 KB) build/bundle-1.js
369.3 kB (-34.64 kB) build/bundle-2.js
220.67 KB (-18.86 kB) build/bundle-3.js
👍 13 🔥 5 4