Пора попрощаться с Webpack?

До появления браузерных ES-модулей у разработчиков не было нативного способа модульной разработки. Поэтому разработчики использовали бандлеры — инструменты, которые анализировали и объединяли исходный код для запуска в браузере.

Со временем начали появляться инструменты как webpack и Rollup, призванные помочь разработчикам в этом процессе.

Однако, по мере разработки, приложение начинает включать в себя всё больше и больше отдельных модулей. В особенно «монструозных» проектах количество модулей может исчисляться тысячами. Такие проекты столкнулись с новой проблемой — узким местом стал запуск сервера разработки, поскольку код нужно транспилировать и объединить для загрузки в браузер. А, как известно, замедление фидбека делает разработчика менее продуктивным и счастливым.

Vite (произносится как /в’и́т/, фр. «быстрый») — инструмент, нацеленный на ускорение и упрощение разработки современных web-проектов. Обратите внимание, Vite не обещает невероятную оптимизацию или совершенно новый опыт разработки. Не стоит ожидать, что ваш огромный бандл будет чудесным образом оптимизирован.

Стоит отметить две важные части:

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

Vite разделяет бандлы на части:

Внешние зависимости (код вендоров): Зависимости, которые зачастую не изменяются на протяжении всей разработки. Vite генерирует предварительные бандлы зависимостей, используя esbuild. Esbuild собирает зависимости в 10-100 раз быстрее стандартных JavaScript-бандлеров
Ваш код (ES модули): Vite предоставляет код вместо нативных ES модулей и таким образом переносит часть работы с бандлом на браузер. Сборщику остаётся только формировать и передавать код по его запросу. Бандлинг перед началом работы сервера:

Бандлинг перед началом работы сервера:

bundlers

Моментальный запуск сервера, нативная передача ES-модулей:

vite

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

Хотя многие браузеры уже поддерживают ES6 модули нативно, остаются старички, которых всё ещё нужно поддерживать
Если не использовать бандл, придётся многократно загружать модули. Для достижения хорошей производительности всё ещё неплохо организовать бандл кода с вычислением неиспользуемого кода, ленивой загрузкой и разделением кода на части.

// Зависимости
"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()]
  });

// 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 World!</div>
    </>
  }
  export default App;

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

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

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

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

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

На основе статьи Gaurav Behere [Оригинал]

Согласен