Миссия 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 помог нашим дизайнерам прототипировать сложные компоненты пользовательского интерфейса и позволил многим нашим кандидатам в инженеры создать целое веб-приложение всего за несколько часов на наших (виртуальных) сайтах. Когда вы видите это в действии, легко понять, почему:
Как это работает
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.
Мы надеемся, что это поможет воплотить ваши идеи в жизнь еще быстрее, и с нетерпением ждем того, что вы создадите!
