🗽vite - будущее уже здесь

Сегодня знаменательный день, мы переехали с webpack5 на vite. Знаменательный он потому, что локальная разработка стала такой-же быстрой, как лет 8 назад, когда я делал простенькие сайтики на чистом html, css и немного js, а галповского лайврелоада хватало с головой.

Для тех кто не в курсе, Vite - это очередной бандлер, но бандлер следующего поколения и сервер в одной туле. Он очень и очень шустрый, как сказал мой коллега - "tested, can confirm, fast as fuck", и супер простой в конфигурации. Если сравнивать webpack и vite, то это как жигуль и тесла роадстер на автопилоте, на тесле - сел и поехал с кайфом, а жигуль сколько не переберай, сильно быстрее он от этого не станет.

Vite настолько быстрый потому, что под капотом использует несколько бандлеров. Во время локальной разработки для JS/TS используется esbuild, для всего остального используется rollup. Для прод билда используется только rollup и terser(для минификации), но начиная с версии 2.6.0 esbuild заменит terser. Как вы уже могли догадаться, вся магия скорости кроется в esbuild, т.к. этот js/ts бандлер написан на go и дает 10-100 кратный прирост скорости по сравнению с другими бандлерами, и в 20-40 раз быстрее терсера (правда компрессия хуже на 1-2%, но это не так критично, не так ли?)! Но дело не только в этом, Hot Module Replacement(HMR) так же безумно шустрый, так как vite использует последний JS и натинвые ES-модули, т.е. esbuild просто транспалит ваш TS в JS и все, а дальше vite грузит все файлы в браузер по http2 и когда что-то меняется в файле, то транспайлтся, грузится и заменяется только этот файл. В то время как остальные бандлеры в браузер грузиться уже сбилженые бандлы, что значительно все замедляет и усложняет HMR...

https://deveasy.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F03697b91-719a-4b4b-a312-bc0525721b01%2FUntitled.png?table=block&id=dd187f65-7e43-45f1-a967-25eeb62f2628

Процесс миграции в первом коменте...
Читать в ноушен: https://bit.ly/3lTicvd

#vite #frontend #tools