Перевод: Gaurav Behere — Time to say goodbye to Webpack?

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

Если вы посмотрите на данные bestofJS за 2021 год, вы увидите, что восходящей звездой в категории инструментов сборки является Vite, оставивший Webpack далеко позади с точки зрения популярности.
Посмотреть на эту статистику можно здесь: 2021 JavaScript Rising Stars

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

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

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

Итак, что Vite делает для улучшения процесса разработки?

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

• Сервер разработки, предоставляет расширенные возможности по сравнению с нативными модулями ES, например Hot Module Replacement — HMR.
• Команда сборки, которая связывает ваш код с Rollup, предварительно настроенными оптимизированными статическими ресурсами для производственной среде.

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

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

Такие инструменты, как Webpack, package и rollup, выполняют ту же работу.
Когда вы начинаете проект, размер и количество модулей JS могут показаться меньшей проблемой, но по мере того, как вы пишете больше кода, проект растет, и вы видите, что запуск сервера разработки занимает много времени.
Поскольку он должен транспилировать код и объединять код таким образом, чтобы его можно было загрузить в браузере. Вест этот медленный процесс может сильно повлиять на продуктивность и удовлетворенность разработчиков.

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

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

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

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

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

Пример работы традиционных сборщиков, таких как wepack

Пример работы Vite

Круто, так а зачем нам вообще нужна сборка для производственной среды?

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

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

Можно начать с минимальной установкой vite в dev зависимости

"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.

Горячая замена модулей (Hot replacement of modules — HMR)

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

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

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

Резюме

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

Рендеринг на стороне сервера (Server-side rendering)

Vite также предварительно настроен для обработки вашей сборки как универсального приложения. Vite может предварительно отображать HTML-страницы, поэтому поисковые роботы могут извлекать содержимое вашей страницы без выполнения js.
Подробнее https://vitejs.dev/guide/ssr.html

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

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

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

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

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

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