Доступен Vite 3.0!

23 июля 2022 - посмотрите анонс Vite 4.0

В феврале прошлого года Эван Ю выпустил Vite 2. С тех пор его использование неуклонно растёт, достигая более 1 миллиона загрузок пакета npm в неделю. После релиза быстро сформировалась обширная экосистема. Vite стал движущей силой обновлённой гонки инноваций в веб-фреймворках. Nuxt 3 использует Vite по умолчанию. SvelteKit, Astro, Hydrogen и SolidStart все построены на Vite. Laravel теперь решил использовать Vite по умолчанию. Vite Ruby показывает, как Vite может улучшить DX Rails. Vitest делает успехи как Vite-нативная альтернатива Jest. Vite стоит за новыми функциями тестирования компонентов в Cypress и Playwright, а Storybook имеет Vite в качестве официального билдера. И список продолжается. Поддерживающие большинство из этих проектов участвуют в улучшении самого ядра Vite, тесно сотрудничая с командой Vite и другими участниками.

Сегодня, спустя 16 месяцев с момента запуска v2, мы рады объявить о выпуске Vite 3. Мы решили выпускать новую мажорную версию Vite как минимум раз в год, чтобы соответствовать EOL Node.js и воспользоваться возможностью регулярно пересматривать API Vite с коротким путём перехода для проектов в экосистеме.

Быстрые ссылки:

• Документация
• Руководство по переходу
• Журнал изменений

Если вы новичок в Vite, мы рекомендуем прочитать раздел Почему Vite. Затем ознакомьтесь с разделами Начало работы и Возможности, чтобы увидеть, что Vite предлагает из коробки. Как обычно, мы приветствуем ваши вклады на GitHub. Более 600 человек уже помогли улучшить Vite. Следите за обновлениями в Twitter или присоединяйтесь к обсуждениям с другими пользователями Vite на нашем Discord-сервере.

Новая документация

Перейдите на vite.dev, чтобы насладиться новой документацией v3. Vite теперь использует новую тему по умолчанию VitePress, с потрясающим тёмным режимом и другими функциями.

Несколько проектов в экосистеме уже мигрировали на нее (см. Vitest, vite-plugin-pwa и сам VitePress).

Если вам нужно получить доступ к документации Vite 2, она останется доступной по адресу v2.vite.dev. Также есть новый поддомен main.vite.dev, где каждый коммит в основную ветку Vite автоматически разворачивается. Это полезно при тестировании бета-версий или внесении вклада в разработку ядра.

Теперь также доступен официальный испанский перевод, который был добавлен к предыдущим переводам на китайский и японский языки:

• English
• 简体中文
• 日本語
• Español

Создание стартовых шаблонов Vite

Шаблоны create-vite стали отличным инструментом для быстрого тестирования Vite с вашим любимым фреймворком. В Vite 3 все шаблоны получили новую тему в соответствии с новой документацией. Откройте их онлайн и начните экспериментировать с Vite 3 прямо сейчас:

Теперь тема общая для всех шаблонов. Это должно помочь лучше передать суть этих стартовых шаблонов как минимальных решений для начала работы с Vite. Для более полных решений, включая настройку линтинга, тестирования и другие функции, существуют официальные шаблоны на основе Vite для некоторых фреймворков, таких как create-vue и create-svelte. Существует также список шаблонов, поддерживаемый сообществом, на Awesome Vite.

Улучшения для разработчиков

Vite CLI

  VITE v3.0.0  ready in 320 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

Помимо улучшений эстетики интерфейса командной строки, вы заметите, что порт по умолчанию для сервера разработки теперь 5173, а сервер предпросмотра слушает на порту 4173. Это изменение гарантирует, что Vite будет избегать конфликтов с другими инструментами.

Улучшенная стратегия подключения WebSocket

Одной из проблем Vite 2 была настройка сервера при работе за прокси. Vite 3 изменяет схему подключения по умолчанию, чтобы она работала из коробки в большинстве сценариев. Все эти настройки теперь тестируются как часть CI экосистемы Vite через vite-setup-catalogue.

Улучшения первоначального запуска

Теперь Vite избегает полной перезагрузки во время первоначального запуска, когда импорты добавляются плагинами во время обхода первоначально статически импортированных модулей (#8869).

Нажмите, чтобы узнать больше

В Vite 2.9 как сканер, так и оптимизатор работали в фоновом режиме. В лучшем случае, когда сканер находил все зависимости, при первоначальном запуске перезагрузка не требовалась. Но если сканер пропускал зависимость, требовалась новая фаза оптимизации, а затем перезагрузка. Vite смог избежать некоторых из этих перезагрузок в v2.9, так как мы определяли, совместимы ли новые оптимизированные чанки с теми, что имел браузер. Но если была общая зависимость, подчанки могли измениться, и перезагрузка была необходима, чтобы избежать дублирования состояния. В Vite 3 оптимизированные зависимости не передаются браузеру до завершения обхода статически импортированных модулей. Быстрая фаза оптимизации запускается, если есть отсутствующая зависимость (например, добавленная плагином), и только после этого отправляются упакованные зависимости. Таким образом, перезагрузка страницы больше не требуется в этих случаях.

import.meta.glob

Поддержка import.meta.glob была переписана. Узнайте о новых функциях в Руководстве по глобальному импорту:

Несколько шаблонов можно передавать в виде массива:

import.meta.glob(['./dir/*.js', './another/*.js'])

Шаблоны исключений теперь поддерживаются (с префиксом !), чтобы игнорировать некоторые конкретные файлы:

import.meta.glob(['./dir/*.js', '!**/bar.js'])

Именованные импорты могут быть указаны для улучшения «встряхивания дерева» (tree-shaking):

import.meta.glob('./dir/*.js', { import: 'setup' })

Пользовательские запросы могут быть переданы для добавления метаданных:

import.meta.glob('./dir/*.js', { query: { custom: 'data' } })

Импорты с предзагрузкой теперь передаются в виде флага:

import.meta.glob('./dir/*.js', { eager: true })

Приведение импорта WASM в соответствие с будущими стандартами

API импорта WebAssembly было пересмотрено, чтобы избежать конфликтов с будущими стандартами и сделать его более гибким:

import init from './example.wasm?init'

init().then((instance) => {
  instance.exports.test()
})

Узнайте больше в руководстве по WebAssembly

Улучшения сборки

ESM SSR сборка по умолчанию

Большинство SSR-фреймворков в экосистеме уже использовали ESM-сборки. Поэтому Vite 3 делает ESM форматом по умолчанию для SSR-сборок. Это позволяет нам упростить предыдущие эвристики внешних зависимостей SSR, экстернализируя зависимости по умолчанию.

Улучшенная поддержка относительного пути

Vite 3 теперь правильно поддерживает относительный путь (с использованием base: ''), позволяя развёрнутым ресурсам быть размещёнными на разных путях без повторной сборки. Это полезно, когда путь не известен во время сборки, например, при развёртывании в сетях с адресацией по содержимому, таких как IPFS.

Экспериментальные функции

Тонкая настройка путей к собранным ресурсам (экспериментально)

Существуют и другие сценарии развёртывания, где этого недостаточно. Например, если сгенерированные хэшированные ресурсы необходимо развернуть на другом CDN, отличном от публичных файлов, требуется более тонкая настройка генерации путей во время сборки. Vite 3 предоставляет экспериментальный API для изменения путей к собранным файлам. Ознакомьтесь с Расширенными параметрами базовой сборки для получения дополнительной информации.

Оптимизация зависимостей Esbuild во время сборки (экспериментально)

Одно из основных различий между временем разработки и временем сборки заключается в том, как Vite обрабатывает зависимости. Во время сборки используется @rollup/plugin-commonjs, чтобы разрешить импорт зависимостей только CJS (например, React). При использовании сервера разработки вместо этого используется esbuild для предварительной сборки и оптимизации зависимостей, и применяется встроенная схема совместимости при преобразовании пользовательского кода, импортирующего зависимости CJS. В процессе разработки Vite 3 мы внедрили изменения, необходимые для того, чтобы также разрешить использование esbuild для оптимизации зависимостей во время сборки. Таким образом, @rollup/plugin-commonjs можно будет избежать, что позволит времени разработки и сборки работать одинаково.

Учитывая, что Rollup v3 будет выпущен в ближайшие месяцы, и мы собираемся продолжить с другим крупным обновлением Vite, мы решили сделать этот режим опциональным, чтобы уменьшить объём v3 и дать Vite и экосистеме больше времени для решения возможных проблем с новым подходом совместимости CJS во время сборки. Фреймворки могут переключиться на использование оптимизации зависимостей esbuild во время сборки по умолчанию в своем собственном темпе до выхода Vite 4.

Частичное принятие HMR (экспериментально)

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

Снижение размера пакета

Vite заботится о своем размере при публикации и установке; быстрая установка нового приложения — это функция. Vite упаковывает большинство своих зависимостей и старается использовать современные легковесные альтернативы, где это возможно. Продолжая эту постоянную цель, размер публикации Vite 3 на 30% меньше, чем у v2:

	Размер публикации	Размер установки
Vite 2.9.14	4.38 МБ	19.1 МБ
Vite 3.0.0	3.05 МБ	17.8 МБ
Сокращение	-30%	-7%

Отчасти это снижение стало возможным благодаря тому, что некоторые зависимости, которые большинству пользователей не были нужны, были сделаны опциональными. Во-первых, Terser больше не устанавливается по умолчанию. Эта зависимость больше не была необходима, поскольку мы уже сделали esbuild минимизатором по умолчанию как для JS, так и для CSS в Vite 2. Если вы используете build.minify: 'terser', вам нужно будет установить его вручную (npm add -D terser). Мы также переместили node-forge из монорепозитория, реализовав поддержку автоматической генерации https-сертификатов в качестве нового плагина: @vitejs/plugin-basic-ssl. Поскольку эта функция создает только недоверенные сертификаты, которые не добавляются в локальное хранилище, она не оправдывала увеличенный размер.

Исправление ошибок

Марафон по сортировке задач был возглавлен @bluwyoo и @sapphi_red, которые недавно присоединились к команде Vite. За последние три месяца количество открытых проблем Vite было сокращено с 770 до 400. И это было достигнуто на фоне рекордного числа новых открытых PR. В то же время @haoqunjiang также составил обширный обзор задач Vite.

Примечания по совместимости

• Vite больше не поддерживает Node.js 12 / 13 / 15, которые достигли конца своей поддержки (EOL). Теперь требуется Node.js 14.18+ / 16+.
• Vite теперь публикуется как ESM, с прокси CJS для ESM-версии для обеспечения совместимости.
• Современная базовая поддержка браузеров теперь нацелена на браузеры, которые поддерживают встроенные ES-модули, встроенный динамический импорт ESM и import.meta.
• Расширения файлов JS в режиме SSR и библиотек теперь используют допустимое расширение (js, mjs или cjs) для выходных JS-записей и чанков в зависимости от их формата и типа пакета.

Узнайте больше в Руководстве по переходу.

Улучшения Vite Core

Работая над Vite 3, мы также улучшили опыт сотрудничества для разработчиков Vite Core.

• Модульные и E2E тесты были перенесены в Vitest, что обеспечивает более быстрый и стабильный опыт разработки. Этот шаг также служит примером для важного инфраструктурного проекта в экосистеме.
• Сборка VitePress теперь тестируется как часть CI.
• Vite обновлен до pnpm 7, следуя за остальной экосистемой.
• Площадки были перемещены в /playgrounds из директории пакетов.
• Пакеты и площадки теперь имеют "type": "module".
• Плагины теперь упаковываются с использованием unbuild, а plugin-vue-jsx и plugin-legacy были переведены на TypeScript.

Экосистема готова к v3

Мы тесно сотрудничали с проектами в экосистеме, чтобы убедиться, что фреймворки на базе Vite готовы к Vite 3. vite-ecosystem-ci позволяет нам запускать CI от ведущих игроков в экосистеме и получать своевременные отчёты перед введением регрессии. Выпуск сегодня должен вскоре быть совместим с большинством проектов, использующих Vite.

Благодарности

Vite 3 является результатом совместных усилий членов команды Vite, работающих вместе с поддерживающими проекты экосистемы и другими участниками разработки ядра Vite.

Мы хотим поблагодарить всех, кто реализовал функции и исправления, предоставил отзывы и принимал участие в разработке Vite 3:

• Члены команды Vite @youyuxi, @patak_dev, @antfu7, @bluwyoo, @sapphi_red, @haoqunjiang, @poyoho, @Shini_92 и @retropragma.
• @benmccann, @danielcroe, @brillout, @sheremet_va, @userquin, @enzoinnocenzi, @maximomussini, @IanVanSchooten, команда Astro и все другие поддерживающие проекты фреймворков и плагинов в экосистеме, которые помогли сформировать v3.
• @dominikg за его работу над vite-ecosystem-ci.
• @ZoltanKochan за его работу над pnpm и за его оперативность, когда нам нужна была поддержка.
• @rixo за поддержку частичного принятия HMR.
• @KiaKing85 за подготовку темы к выпуску Vite 3 и @_brc_dd за работу над внутренними компонентами VitePress.
• @CodingWithCego за новый испанский перевод, а также @ShenQingchuan, @hiro-lapis и других из команд переводчиков на китайский и японский языки за поддержание актуальности переведённой документации.

Мы также хотим поблагодарить отдельных лиц и компании, спонсирующие команду Vite, а также компании, инвестирующие в разработку Vite: часть работы @antfu7 над Vite и экосистемой является частью его работы в Nuxt Labs, а StackBlitz нанял @patak_dev для работы над Vite на полную ставку.

Что дальше

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

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

Если вы хотите помочь улучшить Vite, лучший способ присоединиться — это помочь с сортировкой задач. Присоединяйтесь к нашему Discord и ищите канал #contributing. Или участвуйте в нашем #docs, помогайте другим в #help или создавайте плагины.