[JavaScript, Системы сборки] Анонс Vite 2.0 (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Сегодня я рад объявить об официальном релизе Vite 2.0!Vite (французское слово означает «быстрый», произносится /vit/ ("вит" при. пер.)) - это новый вид инструментов сборки для веб-разработки. Подумайте о предварительно сконфигурированном dev-сервере + сборщик, но более компактном и быстром. Он использует встроенную в браузер поддержку ES модулей и инструменты, такие как esbuild, для быстрого и современного опыта разработки.Чтобы понять, насколько быстро работает Vite, вот видео сравнение загрузки приложения React на Repl.it с использованием Vite и create-react-app (CRA):Извините, данный ресурс не поддреживается. :( Если вы никогда раньше не слышали о Vite и хотели бы узнать о нем больше, ознакомьтесь с обоснованием этого проекта. Если вам интересно, чем Vite отличается от других аналогичных инструментов, посмотрите сравнения. Что нового в версии 2.0Поскольку мы решили полностью реорганизовать внутреннее устройство до того, как версия 1.0 вышла из RC, это фактически первая стабильная версия Vite. Тем не менее, Vite 2.0 имеет много значительных улучшений по сравнению с предыдущим воплощением: Агностическое ядро фреймворкаПервоначальная идея Vite зародилась как хакерский прототип, который обслуживает однофайловые компоненты Vue через ESM. Vite 1 был продолжением этой идеи с реализованным HMR поверх.Vite 2.0 вобрал то, что мы узнали в процессе, но был переработан с нуля с более надежной внутренней архитектурой. Теперь он полностью независим от фреймворка, а вся специфичная для фреймворков функциональность делегируется плагинам. В настоящее время существуют официальные шаблоны для Vue, React, Preact, Lit Element и продолжается интеграции Svelte усилиями сообщества. (Смотрите так же Awesome Vite- Прим. Пер.)Новый формат плагинов и APIВдохновленная WMR, новая система плагинов расширяет интерфейс плагинов Rollup и совместима со многими плагинами Rollup из коробки. Плагины могут использовать перехватчики, совместимые с Rollup, с дополнительными перехватчиками и свойствами, специфичными для Vite, для настройки поведения исключительно для Vite (например, различное поведение при разработке и сборке или настраиваемая обработка HMR).Программный API также был значительно улучшен, чтобы упростить работу с инструментами / фреймворками более высокого уровня, созданными на основе Vite.Предварительная сборка зависимостей используя esbuildПоскольку Vite является собственным сервером разработки и использует ESM, он предварительно собирает и упаковывает зависимости, чтобы уменьшить количество запросов браузера и обрабатывать преобразование CommonJS в ESM. Раньше Vite делал это с помощью Rollup, а в версии 2.0 используется esbuild, что приводит к 10-100-кратному ускорению предварительной сборки зависимостей. Для справки, холодная загрузка тестового приложения с тяжелыми зависимостями, такими как React Meterial UI, раньше занимала 28 секунд на Macbook Pro с процессором M1, а теперь занимает ~1,5 секунды. Ожидайте аналогичных улучшений, если вы переходите с традиционной установки на основе сборщика.Первоклассная поддержка CSSVite рассматривает CSS как важную часть графа модулей и поддерживает следующее из коробки:
- Улучшение преобразователя: пути @import и url() в CSS улучшены с помощью преобразователя Vite для учета псевдонимов и зависимостей npm.
- Перебазирование URL: пути url() автоматически изменяются независимо от того, откуда импортируется файл.
- Разделение CSS кода: отделённый фрагмент JS также генерирует соответствующий отдельный файл CSS, который автоматически загружается параллельно с фрагментом JS по запросу.
Server-Side Rendering (SSR) Support Vite 2.0 поставляется с экспериментальной поддержкой SSR. Vite предоставляет API-интерфейсы для эффективной загрузки и обновления исходного кода на основе ESM в Node.js во время разработки (почти как HMR на стороне сервера) и автоматически экстернализирует совместимые с CommonJS зависимости для повышения скорости разработки и сборки SSR. Продуктовый сервер можно полностью отделить от Vite, и ту же настройку можно легко адаптировать для выполнения предварительного рендеринга / SSG.Vite SSR предоставляется как функция низкого уровня, и мы ожидаем увидеть фреймворки более высокого уровня, использующие ее под капотом.Поддержка устаревших браузеровVite по умолчанию нацелен на современные браузеры с собственной поддержкой ESM, но вы также можете получить поддержку устаревших браузеров через официальный @vitejs/plugin-legacy. Плагин автоматически создает двойные modern/legacy пакеты и предоставляет правильный пакет на основе браузера, обеспечивая более эффективный код в современных браузерах.Попробуйте!Это было много изменений, но начать работу с Vite просто! Вы можете запустить приложение на базе Vite буквально за минуту, начиная со следующей команды (убедитесь, что у вас Node.js> = 12):
npm init @vitejs/app
Затем ознакомьтесь с руководством, чтобы узнать, что Vite предлагает из коробки. Вы также можете проверить исходный код на GitHub, следить за обновлениями в Twitterили присоединиться к обсуждениям с другими пользователями Vite на нашем сервере чата Discord.
===========
Источник:
habr.com
===========
===========
Автор оригинала: Evan You
===========Похожие новости:
- [Разработка веб-сайтов, JavaScript, Работа с 3D-графикой, Canvas, IT-компании] Шейдеры, Three.js и киберпанк. Как мы делали лендинг в неоново-античной стилистике
- [Интерфейсы, Конференции, IT-компании] Я ❤︎ Фронтенд 2021: доклады, воркшопы, CTF
- [JavaScript, Учебный процесс в IT, Управление персоналом, Карьера в IT-индустрии] Как проходит собеседование Junior фронтенд-разработчика
- [Разработка веб-сайтов, JavaScript, Программирование, ReactJS] 5 подходов к стилизации React-компонентов на примере одного приложения
- [JavaScript, Программирование, Учебный процесс в IT] Мои рассуждения на тему Как учиться программировать на JavaScript
- [JavaScript, Node.JS, Профессиональная литература] Книга «Веб-разработка с применением Node и Express. Полноценное использование стека JavaScript. 2-е издание »
- [.NET] .NET 5 + Source Generator = Javascript
- [Разработка веб-сайтов, JavaScript, TypeScript] TypeScript: Раскладываем tsconfig по полочкам. Часть 1
- [Веб-дизайн, Разработка веб-сайтов, CSS, HTML] Боль фронтов, или что нам нужно от дизайнеров
- [Opera, Habr, JavaScript, Расширения для браузеров, Лайфхаки для гиков] Пишем расширение-читалку для Habr
Теги для поиска: #_javascript, #_sistemy_sborki (Системы сборки), #_bundler, #_nextgen, #_vite, #_frontend, #_javascript, #_sistemy_sborki (
Системы сборки
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 14:17
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Сегодня я рад объявить об официальном релизе Vite 2.0!Vite (французское слово означает «быстрый», произносится /vit/ ("вит" при. пер.)) - это новый вид инструментов сборки для веб-разработки. Подумайте о предварительно сконфигурированном dev-сервере + сборщик, но более компактном и быстром. Он использует встроенную в браузер поддержку ES модулей и инструменты, такие как esbuild, для быстрого и современного опыта разработки.Чтобы понять, насколько быстро работает Vite, вот видео сравнение загрузки приложения React на Repl.it с использованием Vite и create-react-app (CRA):Извините, данный ресурс не поддреживается. :( Если вы никогда раньше не слышали о Vite и хотели бы узнать о нем больше, ознакомьтесь с обоснованием этого проекта. Если вам интересно, чем Vite отличается от других аналогичных инструментов, посмотрите сравнения. Что нового в версии 2.0Поскольку мы решили полностью реорганизовать внутреннее устройство до того, как версия 1.0 вышла из RC, это фактически первая стабильная версия Vite. Тем не менее, Vite 2.0 имеет много значительных улучшений по сравнению с предыдущим воплощением: Агностическое ядро фреймворкаПервоначальная идея Vite зародилась как хакерский прототип, который обслуживает однофайловые компоненты Vue через ESM. Vite 1 был продолжением этой идеи с реализованным HMR поверх.Vite 2.0 вобрал то, что мы узнали в процессе, но был переработан с нуля с более надежной внутренней архитектурой. Теперь он полностью независим от фреймворка, а вся специфичная для фреймворков функциональность делегируется плагинам. В настоящее время существуют официальные шаблоны для Vue, React, Preact, Lit Element и продолжается интеграции Svelte усилиями сообщества. (Смотрите так же Awesome Vite- Прим. Пер.)Новый формат плагинов и APIВдохновленная WMR, новая система плагинов расширяет интерфейс плагинов Rollup и совместима со многими плагинами Rollup из коробки. Плагины могут использовать перехватчики, совместимые с Rollup, с дополнительными перехватчиками и свойствами, специфичными для Vite, для настройки поведения исключительно для Vite (например, различное поведение при разработке и сборке или настраиваемая обработка HMR).Программный API также был значительно улучшен, чтобы упростить работу с инструментами / фреймворками более высокого уровня, созданными на основе Vite.Предварительная сборка зависимостей используя esbuildПоскольку Vite является собственным сервером разработки и использует ESM, он предварительно собирает и упаковывает зависимости, чтобы уменьшить количество запросов браузера и обрабатывать преобразование CommonJS в ESM. Раньше Vite делал это с помощью Rollup, а в версии 2.0 используется esbuild, что приводит к 10-100-кратному ускорению предварительной сборки зависимостей. Для справки, холодная загрузка тестового приложения с тяжелыми зависимостями, такими как React Meterial UI, раньше занимала 28 секунд на Macbook Pro с процессором M1, а теперь занимает ~1,5 секунды. Ожидайте аналогичных улучшений, если вы переходите с традиционной установки на основе сборщика.Первоклассная поддержка CSSVite рассматривает CSS как важную часть графа модулей и поддерживает следующее из коробки:
npm init @vitejs/app
=========== Источник: habr.com =========== =========== Автор оригинала: Evan You ===========Похожие новости:
Системы сборки ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 14:17
Часовой пояс: UTC + 5