Прежде чем мы ответим на главный вопрос, давайте посмотрим, почему мы вообще его рассматриваем.

Если вы посмотрите на данные bestofJS за 2021 год, вы увидите, что восходящей звездой в категории инструментов для сборки является Vite, оставляя Webpack далеко позади по популярности.

Ознакомьтесь с дополнительной статистикой здесь:
2021 JavaScript Rising Stars

Давайте поближе познакомимся с Vite

Vite (французское слово, означающее "быстрый", произносится как /vit/, например, "veet") — это инструмент для сборки, цель которого — ускорить и упростить development работу с современными веб-проектами.

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

Так что же делает Vite, чтобы сделать процесс разработки лучше?

Он состоит из двух основных частей:

  • Сервер разработки, предоставляющий расширенные возможности по сравнению с собственными модулями ES, например чрезвычайно быструю замену горячего модуля (HMR).
  • Команда сборки, которая связывает ваш код с Rollup, предварительно настроенным для вывода оптимизированных статических ресурсов для производства.

Vite является самоуверенным и поставляется с разумными настройками по умолчанию из коробки, но также обладает широкими возможностями расширения с помощью своего API-интерфейса плагинов и API-интерфейса JavaScript с полной поддержкой ввода.

Мы уже давно не пишем код JS модульным способом, особенно после модулей ES6. Поскольку не многие браузеры изначально обрабатывали загрузку модулей ES6, у нас есть концепция объединения нашего кода с использованием инструментов, которые сканируют, обрабатывают и объединяют наши исходные модули в файлы, которые могут выполняться в браузере.

Такие инструменты, как Webpack, package и rollup, выполняют ту же работу.

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

Поскольку он должен транспилировать код и объединять код таким образом, чтобы его можно было загрузить в браузерах.

Медленная петля обратной связи может сильно повлиять на продуктивность и удовлетворенность разработчиков.

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

Vite разделяет пакеты на две части:

  1. Внешние зависимости (код поставщика). Зависимости в основном представляют собой простой JavaScript, который не часто меняется во время разработки.
    Vite предварительно связывает зависимости с помощью esbuild. Esbuild предварительно связывает зависимости в 10–100 раз быстрее, чем JavaScript. сборщики на основе.
  2. Ваш код (модули ES): Vite предоставляет исходный код, а не собственный ESM. По сути, это позволяет браузеру взять на себя часть работы сборщика. Vite нужно только преобразовывать и обслуживать исходный код по требованию, как того требует браузер.

Здесь Vite предполагает, что пока вы разрабатываете на своем локальном компьютере, у вас будет последний из браузеров, которые изначально поддерживают загрузку модулей ES6.

По сути, это означает, что вам не нужно тратить время на сборку вашего кода до того, как сервер сможет запуститься.

Круто, так зачем комплектовать для производства?

  • Хотя большинство браузеров теперь поддерживают загрузку ES-модулей изначально, если не вся ваша целевая аудитория использует последние версии браузеров, вам все равно нужна комплектация.
  • Если вы не свяжете, вам придется совершать много обходов по сети, чтобы получить модули. Чтобы получить оптимальную производительность загрузки в продакшене, все же лучше связать свой код с встряхиванием деревьев, отложенной загрузкой и общим разделением фрагментов (для лучшего кэширования).

Начало работы с Vite

С минимальными зависимостями разработчика вы можете начать летать

"devDependencies": {
  "@vitejs/plugin-react": "^1.1.4",
  "vite": "^2.7.10"
}

Очень простой vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()]
});

Две простые команды для запуска сервера разработки и создания рабочей сборки:
vite и vite build соответственно.

Vite ищет запись index.html в корневом каталоге, откуда вам нужно загрузить модуль root/index вашего кода.

index.html

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="root"></div>
  <script type="module" src="./index.jsx"></script>
</body>
</html>

index.jsx

import React from 'react';
import ReactDOM from 'react-dom'
import App from './src/app';
ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.querySelector('#root')
);

src/app.jsx

import React from 'react';
const App = () => {
  return <>
    <div>Hello There</div>
    <div>Time right now: {new Date().toTimeString()}</div>
  </>
}
export default App;

Без связывания кода сервер запускается за доли секунды

Если вы посмотрите, как модули ES загружаются в браузере, обратите внимание, что app.jsx загружается как собственный модуль ES.

Горячая замена модулей (ГМР)

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

Вот почему некоторые сборщики поддерживают горячую замену модуля (HMR), позволяя модулю «горячую замену» себя, не затрагивая остальную часть страницы.

Опять же, по мере роста проекта HMR также занимает много времени, что может убить производительность.

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

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

Резюме

  • Vite быстро запускает ваш сервер разработки, пропуская связывание.
  • Vite используйте коды состояния HTTP для более быстрой перезагрузки и кэширования.
  • Vite использует собственный ESM для горячей замены модуля. Таким образом, ваши изменения быстрее отразятся в вашем приложении.
  • Поскольку Vite немного сомневается в конфигурации, с минимальной конфигурацией все в порядке.

Рендеринг на стороне сервера

Vite также предварительно настроен для обработки вашей сборки как универсального приложения. Vite может предварительно отображать HTML-страницы, поэтому поисковые роботы могут получать содержимое вашей страницы без выполнения js.

Подробнее: https://vitejs.dev/guide/ssr.html

Так должны ли мы просто перейти на Vite и перестать использовать такие инструменты, как Webpack?

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

Что дает вам множество более простых API с большим количеством абстракций, а мнение часто сложно настроить.

Исходя из этого принципа, если вы используете очень специфические конфигурации Webpack с длинным хвостом, не стоит сразу переходить на Vite. Если вы используете Webpack с базовыми конфигурациями, вам следует перейти на Vite для лучшего взаимодействия с разработчиком.

Если я начинаю новый проект, он точно будет использовать Vite.

Спасибо за чтение. Если вы перенесли масштабный проект из Webpack в Vite, поделитесь своим опытом. Будет здорово поучиться на вашем опыте.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.