Vite: убийца Webpack или что-то еще?

Что такое Vite?

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

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

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

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

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

Проблемы

До появления модулей ES в браузерах разработчикам приходилось полагаться на внешние инструменты для написания модульного кода JavaScript. Это привело к разработке инструментов «связки», таких как webpack, Rollup и Parcel, которые улучшили опыт разработки внешнего интерфейса.

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

-› Медленный запуск сервера

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

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

Зависимости в основном представляют собой простой JavaScript, который не часто меняется во время разработки. Некоторые большие зависимости (например, библиотеки компонентов с сотнями модулей) также довольно дороги в обработке. Зависимости также могут поставляться в различных форматах модулей (например, ESM или CommonJS).
Vite предварительно связывает зависимости с помощью esbuild. esbuild написан на Go и предварительно связывает зависимости в 10–100 раз быстрее, чем сборщики на основе JavaScript.
Исходный код часто содержит нестандартный код JavaScript, который необходимо преобразовать (например, компоненты JSX, CSS или Vue/Svelte), и будет очень часто редактироваться. Кроме того, необязательно загружать весь исходный код одновременно (например, при разделении кода на основе маршрута).
Vite предоставляет исходный код поверх собственного ESM. Это, по сути, позволяет браузеру взять на себя часть работы сборщика: Vite нужно только преобразовать и предоставить исходный код по запросу, когда браузер запрашивает его. . Код условного динамического импорта обрабатывается только в том случае, если он фактически используется на текущем экране.

- › Медленные обновления

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

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

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

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

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

Основное использование Vite

Вот пример того, как использовать Vite для настройки простого проекта JavaScript:

Во-первых, вам нужно будет установить Vite на свой компьютер, выполнив следующую команду:

# npm
npm create vite@latest

# yarn
yarn create vite

# pnpm
pnpm create vite

2. Инициализируйте новый проект, запустив:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

3. Теперь вы можете запустить сервер разработки, выполнив следующую команду:

vite

4. Это создаст новый файл index.html в каталоге вашего проекта и откроет его в браузере по умолчанию. Сервер разработки также будет работать на http://localhost:3000

5. Вы можете начать писать свой код JavaScript в папке src, а Vite выполнит импорт и автоматически перезагрузит браузер, когда вы внесете изменения в свой код.

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

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

Конфигурация

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

module.exports = {
  // Enable the esbuild plugin, which will transpile modern JavaScript to compatible with older browsers
  esbuild: {
    minify: true,
    target: 'es5'
  },
  // Enable the TypeScript plugin
  plugins: [
    require('vite-plugin-typescript')
  ]
}

Этот файл конфигурации включает подключаемый модуль esbuild, который минимизирует и транспилирует современный JavaScript в ES5, чтобы он был совместим со старыми браузерами, а также включает подключаемый модуль TypeScript.

Вы также можете добавить другие параметры, такие как корневой каталог вашего проекта, настройки прокси-сервера, псевдоним или определить собственное промежуточное ПО.

module.exports = {
  alias: {
    '@': '/src',
  },
  plugins: [
    'vite-plugin-typescript',
  ],
};

В этом примере я использую параметр alias, чтобы настроить Vite для распознавания символа @ в качестве псевдонима для папки src. Это позволяет использовать более короткий импорт, например import { foo } from '@/bar' вместо import { foo } from './src/bar'.

Кроме того, я использую параметр plugins, чтобы настроить Vite для использования плагина vite-plugin-typescript, который позволяет Vite транспилировать код TypeScript. Чтобы использовать его, вам нужно сначала установить его, запустив npm install vite-plugin-typescript.

Существуют и другие параметры, которые вы можете использовать для настройки Vite, такие как root, port, assetsDir, outDir и другие, вы можете проверить официальную документацию для получения более подробной информации https://vitejs.com/docs/config.

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

import { defineConfig, loadEnv } from 'vite';
import path from 'path';
import { createVuePlugin } from 'vite-plugin-vue2';
import envCompatible from 'vite-plugin-env-compatible';
import { injectHtml } from 'vite-plugin-html';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const { OUTPUT_DIR, VITE_PORT } = loadEnv(mode, process.cwd(), '');

  return {
    resolve: {
      alias: [
        {
          find: /^~/,
          replacement: '',
        },
        {
          find: '@',
          replacement: path.resolve(__dirname, 'src'),
        },
        {
          find: '@trendyol/sc-ui-kit',
          replacement: path.resolve(__dirname, 'node_modules/@trendyol/sc-ui-kit/dist'),
        },
      ],
      extensions: [
        '.mjs',
        '.js',
        '.ts',
        '.jsx',
        '.tsx',
        '.json',
        '.vue',
      ],
    },
    plugins: [
      createVuePlugin({ jsx: true }),
      viteCommonjs(),
      envCompatible(),
      injectHtml(),
    ],
    css: {
      devSourcemap: false,
      preprocessorOptions: {
        sass: {
          prependData: '@import "@/styles";',
          quietDeps: true,
        },
        scss: {
          additionalData: '@import "@/styles";',
          quietDeps: true,
        },
      },
    },
    test: {
      globals: true,
    },
    server: {
      strictPort: false,
      port: VITE_PORT,
    },
    build: {
      sourcemap: true,
      outDir: OUTPUT_DIR,
    },
  };
});

Пример конфигурации Vite из моего проекта на Trendyol

Почему мы должны использовать Vite?

Вайт имеет ряд преимуществ:

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

С другой стороны, Vite также имеет некоторые недостатки:

Ограниченная поддержка браузера: Vite полагается на собственную функцию модулей ES в браузере, которая еще не полностью поддерживается всеми браузерами. Это означает, что некоторые пользователи не смогут использовать ваше приложение, если они используют более старый браузер.
Ограниченная экосистема плагинов. У Vite относительно ограниченная экосистема плагинов по сравнению с другими инструментами сборки, что означает, что он может не иметь всех функций или функций, которые нужны некоторым разработчикам.
Ограниченные возможности производственной сборки: Vite в первую очередь ориентирован на сборку для разработки и может иметь не так много функций для производственной сборки, как другие инструменты сборки.
Не так широко распространен: Vite – относительно новый инструмент сборки, который может быть не так широко принят сообществом, как другие более известные инструменты сборки, что может затруднить поиск помощи или ресурсов.
Не подходит для больших монолитных приложений. Vite спроектирован так, чтобы быть простым и быстрым, поэтому он может быть не лучшим вариантом для больших монолитных приложений, требующих более сложных процессов сборки.

Сравнение с другими

Vite — относительно новый инструмент сборки, и он отличается от других более известных инструментов сборки, таких как webpack или Parcel, несколькими способами:

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

Таким образом, Vite — отличный вариант для разработчиков, которые ищут более быстрый и более эффективный способ создания и разработки приложений JavaScript, особенно для проектов малого и среднего размера. Webpack и Parcel получили более широкое распространение, имеют более продвинутые функции и больше доступных плагинов. Лучше всего оценить потребности вашего конкретного проекта и выбрать инструмент, который лучше всего соответствует вашим потребностям.

Миграция с Webpack

Переход с webpack на Vite может быть простым процессом, но следует помнить о нескольких вещах:

Убедитесь, что ваша кодовая база использует новейшие функции JavaScript, такие как модули ES, поскольку Vite использует их для обработки импорта.
Вам нужно будет удалить все файлы конфигурации, относящиеся к веб-пакету, такие как webpack.config.js, и заменить их файлом vite.config.js.
Вам нужно будет обновить файл package.json, чтобы заменить команды webpack командами Vite.
Просмотрите зависимости вашего проекта и удалите все загрузчики веб-пакетов или плагины, которые больше не нужны.
Тщательно протестируйте свое приложение после миграции, чтобы убедиться, что все работает должным образом.
В случае использования плагинов или загрузчиков, не поддерживаемых Vite, вам придется искать альтернативы или внедрять их вручную.

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

Также вы можете посмотреть этот плагин для миграции: https://github.com/originjs/webpack-to-vite

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

Заключение

В заключение, Vite — это современный инструмент сборки и сервер разработки, предназначенный для обеспечения более быстрой и эффективной разработки для разработчиков JavaScript.

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

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

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

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