Зачем Висеть

Проблемы

Прежде чем модули ES были доступны в браузерах, разработчики не имели нативного механизма для авторизации JavaScript в модульной форме. Вот почему мы все знакомы с концепцией «объединения»: используя инструменты, которые ползут, обрабатывают и объединяют наши исходные модули в файлы, которые могут работать в браузере.

Со временем мы видели такие инструменты, как WebPack , Rollup и Parcel , которые значительно улучшили опыт разработки для разработчиков фронта.

Однако, поскольку мы строим все больше и больше амбициозных приложений, количество JavaScript, с которым мы имеем дело, также значительно увеличивается. Крупномасштабные проекты нередко содержат тысячи модулей. Мы начинаем нажимать на узкое место для работы для инструментов на основе JavaScript: часто может потребоваться необоснованно долгое ожидание (иногда до минуты!), Чтобы раскрутить сервер Dev, и даже с заменой горячих модулей (HMR), редактирование файлов может занять пару секунд, чтобы быть отраженным в браузере. Медленная петля обратной связи может сильно повлиять на производительность и счастье разработчиков.

VITE направлен на решение этих вопросов путем использования новых достижений в экосистеме: доступность нативных модулей ES в браузере и рост инструментов JavaScript, написанных на компиляции к местным языкам.

Медленный Запуск Сервера

При холодном запуске сервера Dev, настройка сборки на основе Бундлера должна с нетерпением заползти и создать все ваше приложение, прежде чем его можно будет обслужить.

VITE улучшает время запуска DEV, сначала разделяя модули на приложение на две категории: зависимости и исходный код .

• Зависимости в основном являются простым JavaScript, который часто не меняется во время разработки. Некоторые большие зависимости (например, библиотеки компонентов с сотнями модулей) также довольно дороги в процессе. Зависимости также могут быть отправлены в различных форматах модулей (например, ESM или CommonJS).

  Проверьте зависимости предварительных связей с использованием ESBUILD . Esbuild написана в Go и предварительно связанных зависимостей в 10-100x быстрее, чем бундлеры на основе JavaScript.

• Исходный код часто содержит нездоровый JavaScript, который нуждается в преобразовании (например, JSX, CSS или Vue/Svelte Components), и будет отредактироваться очень часто. Кроме того, не весь исходный код должен быть загружен одновременно (например, с рассылкой кода на основе маршрута).

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

Медленные Обновления

Когда файл отредактирован в настройке сборки на основе Bundler, неэффективно восстанавливать весь пакет по очевидной причине: скорость обновления линейно ухудшается с размером приложения.

В некоторых пучках сервер Dev запускает объединение в памяти, так что ему необходимо аннулировать часть графика модуля только при изменении файла, но ему все равно необходимо реконструировать весь пакет и перезагрузить веб-страницу. Реконструкция пакета может быть дорогой, а перезагрузка страницы ударяет текущее состояние приложения. Вот почему некоторые бундлеры поддерживают замену горячих модулей (HMR): позволяя модулю «горячее замену», не влияя на оставшуюся часть страницы. Это значительно улучшает DX - однако, на практике мы обнаружили, что даже скорость обновления HMR значительно ухудшается по мере роста размера приложения.

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

VITE также использует заголовки HTTP для ускорения перезагрузки полной страницы (опять же, пусть браузер выполняет для нас больше работы): запросы модуля исходного кода выполняются условными через 304 Not Modified , а запросы модуля зависимости сильно кэшируются через Cache-Control: max-age=31536000,immutable поэтому они снова не попадают на сервер.

Как только вы испытаете, насколько быстро виды, мы очень сомневаемся, что вы захотите снова смириться с комплексной разработкой.

Зачем Связывать Производство

Несмотря на то, что Native ESM в настоящее время широко поддерживается, доставка ESM в производстве по -прежнему неэффективна (даже при HTTP/2) из -за дополнительных сетевых круглых поездок, вызванных вложенным импортом. Чтобы получить оптимальную производительность загрузки в производстве, все равно лучше объединить ваш код с помощью похвалы деревьев, ленивой загрузки и общего расщепления кусочка (для лучшего кэширования).

Обеспечение оптимального вывода и поведенческой согласованности между Dev Server и производственной сборкой нелегко. Вот почему Vite отправляется с предварительно сконфигурированной командой сборки , которая выпекает во многих оптимизации производительности из коробки.

Почему бы не объединить с Esbuild?

В то время как VITE использует ESBUILD, чтобы предварительно отправлять некоторые зависимости в DEV , VITE не использует ESBUILD в качестве связки для производственных сборки.

Текущий API плагина Vite не совместим с использованием esbuild в качестве бундлера. Несмотря на то, что esbuild , будучи быстрее, внедрение Veite гибкого API и инфраструктуры Rollup в значительной степени способствовало его успеху в экосистеме. На данный момент мы считаем, что Rollup предлагает лучший компромисс с гибкостью и гибкой производительности.

Rollup также работает над улучшением производительности, переключая его анализатор на SWC в V4 . И есть постоянные усилия, чтобы построить порт ржавчины под названием Rolldown. После того, как Rolldown будет готов, он может заменить как Rollup, так и Esbuild в Vite, значительно улучшив производительность сборки и устранение несоответствий между разработкой и сборкой. Вы можете посмотреть на более подробную информацию Evan You's Viteconf 2023 .

Насколько Vite Относится К Другим Непредвиденным Инструментам Сборки?

WMR от команды Preact надеялся предоставить аналогичный набор функций. Universal Rollup Plugin API VITE для DEV и Build был вдохновлен им. WMR больше не поддерживается. Команда Preact теперь рекомендует Vite с @preactjs/preset-vite .

Снежный покров был также нативным сервером ESM Dev без бруска, очень похожим по объему, чтобы выселить. Предварительница зависимости Vite также вдохновлена SnowPack V1 (теперь esinstall ). Снежок больше не поддерживается. Команда Snowpack сейчас работает над Astro , статическим строителем сайтов, работающим на Vite.

@web/dev-server (ранее es-dev-server )-отличный проект, и настройка сервера KOA Veite 1.0 была вдохновлена. Проект @web зонтика активно поддерживается и содержит много других отличных инструментов, которые также могут принести пользу пользователям Vite.