Почему мы перешли с Webpack на Vite

Автор оригинала: Sergei Chestakov
  • Перевод
image


Миссия Replit — сделать программирование более доступным. Мы предоставляем людям бесплатные вычисления в облаке, чтобы они могли создавать приложения на любом устройстве. Одним из самых популярных способов создания приложений в Интернете на сегодняшний день является React. Однако исторически инструменты React были медленными на Replit. В то время как экосистема JavaScript создала отличные инструменты для профессиональных разработчиков, многие из самых популярных из них, такие как Create React App и Webpack, становятся все более сложными и неэффективными.

К счастью, мы заметили, как сообщество JavaScript осознало эту проблему и перешло к созданию более быстрых и эффективных инструментов, что означает, что мы, наконец, можем предоставить опыт, который наши пользователи ожидают от нас.

Этот новый опыт основан на Vite, инструменте сборки JavaScript, который обеспечивает быструю и экономичную разработку. Vite поставляется с рядом функций, включая HMR или Hot Module Replacement, команду сборки, которая объединяет ваши инструменты с Rollup, и встроенную поддержку TypeScript и JSX.

Vite ускоряет разработку с React. Очень сильно ускоряет. С HMR изменения, которые вы вносите, визуализируются в течении миллисекунд, что значительно ускоряет создание прототипов пользовательского интерфейса. Имея это в виду, мы решили переписать наш шаблон React, используя Vite, и были шокированы, увидев, насколько он стал быстрее. Вот как он выглядит по сравнению с нашим старым шаблоном CRA:



За последние несколько недель наш новый шаблон React помог нашим дизайнерам прототипировать сложные компоненты пользовательского интерфейса и позволил многим нашим кандидатам в инженеры создать целое веб-приложение всего за несколько часов на наших (виртуальных) сайтах. Когда вы видите это в действии, легко понять, почему:

image

Как это работает


Vite работает, по-разному обрабатывая ваш исходный код и ваши зависимости. В отличие от вашего исходного кода, зависимости не так часто меняются во время разработки. Vite использует этот факт, предварительно связывая ваши зависимости с помощью esbuild. Esbuild — это сборщик JS, написанный на Go, который связывает зависимости в 10-100 раз быстрее, чем альтернативы на основе JavaScript, такие как Webpack и Parcel.

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

Наконец, Vite поддерживает HMR, который гарантирует, что при редактировании файла заменяются только соответствующие модули, а не перестраивает весь бандл, что вызывает перезагрузку страницы и сбрасывает состояние. В отличие от других сборщиков, Vite выполняет HMR над собственными модулями ES, что означает, что ему нужно только аннулировать затронутые модули при редактировании файла. Это гарантирует, что время обновления будет постоянно быстрым, а не линейно масштабироваться по мере роста вашего приложения.

Начнем


Для начала просто сделайте форк нашего шаблона React или выберите React.js в раскрывающемся списке при создании нового репла.

Vite также не зависит от фреймворка, поэтому, если React вам не нравится, вы также можете использовать наши шаблоны Vue и Vanilla JS.

Мы надеемся, что это поможет воплотить ваши идеи в жизнь еще быстрее, и с нетерпением ждем того, что вы создадите!
Timeweb
VDS и инфраструктура. По коду Habr10 — 10% скидка

Комментарии 3

    +9
    Недавно три недели делал одну софтинку под Витой. Очень приятная штука, хотя если начинаешь кастомизировать конфиг, то половина кайфа пропадает. Так как софтинка была Svelte/Typescript, то там пришлось дописать порядочно костылей, но не суть. В принципе, на каждую проблему можно быстро нагуглить решение.

    В общем, был счастлив — мгновенный ребилд и обновление стилей и разметки, даже данные в полях не пропадают, что ещё нужно девелоперу, чтобы спокойно встретить релиз? ну замечательная штука, причём бесплатно!

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

    И оно заработало! Вообще из коробки, ничего не менял!

    Полдня был счастлив, пока не проверил в прод-режиме при деплое. В проде чанки делаются, но кривые: падают даже в распоследнем хроме. Рецептов победы нет. Полифилов нет. Но есть для роллапа, который там внутри, где неонка. Но настройки нормально не пробрасываются, а если пробрасываются, то не работают.

    Ну я, конечно, вытащил конфиг роллапа на предмет собрать всё на чистом ролле, отладить, а потом впихнуть его вите взад. Демка — работает. Подключаешь AWS с его когнитой и прочим амплифаем — не работает, рецептов нет, ждите апдейта от AWS, может, починят. Убил два дня на попытки завести, но там одно чинишь — второе ломается, и костыли в монитор не помещаются, а он большой.

    Потом смотрю, а оно не работает и при этом конфиг уже раза в полтора побольше, чем был самый первый вебпаковский. Вернул вебпак обратно, включил ему экспериментальный кэш сборки — и вебпак стартует за те же две секунды, что и вита, и пересборка за полсекунды, и чанки нормально порезались и работают… ну апдейт страницы менее красивый, да, чаще надо полностью обновлять.

    Без морали — сетап, безусловно, очень нестандартный (обучательно-развлекательный проект, специально подбирал далёкий от работы стек), и требования довольно надуманные. Но по итогу вебпак-конфиг короче, работает с той же скоростью (иногда, правда, падает — экспериментальный же режим — но редко) и собирает всё правильно. Понятно, что внутри у него та же куча костылей для import(), но он хотя бы знает, как её правильно приготовить и не сломать AWS.

    Но вообще вита очень понравилась. Если без извращений, то прекрасный сборщик, мне даже больше парсела понравился.
      +2

      Аналогичный опыт — долго провозился с Vite и Snowpack, пытаясь хотя бы самый простой рабочий проект завести. Но отсутствие возможности собирать нодовый сервер под SSR или без него сразу ограничило проекты до нескольких (экспериментальные плагины есть, но после долгой возни только с большими костылями завелись, плюс нет частичного обновления — серверная часть каждый раз прогоняется через бандлер, что в сотню раз медленнее). Часть из оставшихся использует асинхронные чанки, как вы описываете — с общими частями, lazy-подгрузкой, контентхешем в названиях, прелоадингом, экстрактом css-файлов и т.п. После долгой возни тоже корректно не завелись.


      Остались простейшие SPA-монолиты из пет-проджектов, потому что энтерпрайз так не делается. Там да, завелось, но бандлер с автополифиллингом опять же нужен, конфигурирование через env-параметры, комменты в файлы и куча всего еще, что в Вебпаке по привычке за пару минут делается, а тут приходится "женить" дев-сборщик (довольно сырые причем оба и Vite и Snowpack — в их issues прямо поселиться пришлось) и бандлер. С этим можно справиться, что-то завелось корректно, и в дев-режиме действительно быстрее собирается и в основном хот-релоад работает лучше, чем в Вебпаке, но однозначно оно того не стоит. С кешированием и параллельностью Вебпак такие проекты тоже за 0.03-0.05с пересобирает вместо 0.01с у этих новичков. Поэтому дальше копаться не стал, подожду, пока хотя бы основные энтерпрайз-фичи будут хорошо поддерживаться и с бандлерами начнут крепко дружить.

      +2

      В вебпаке тоже можно использовать esbuild и будет быстро https://github.com/privatenumber/esbuild-loader

      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

      Самое читаемое