Когда стали использовать реакт, мы взяли стандартный 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
#javascript #tools
