От Webpack к Vite: путь плавной миграции

2022-09-05 2 мин

Оглавление

1. Зачем мигрировать? Проблемы Webpack

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

Медленный холодный запуск: При каждом запуске сервера разработки (dev-server) Webpack должен обойти весь граф зависимостей и собрать все модули в памяти. В крупных проектах этот процесс может занимать несколько минут.
Медленное горячее обновление (HMR): При изменении файла Webpack должен заново вычислить и заменить связанные модули. Это быстрее полной перезагрузки страницы, но в крупных проектах задержка может достигать нескольких или даже более десяти секунд, прерывая рабочий ритм.

2. Как Vite решает эти проблемы?

Vite, название которого по-французски означает «быстро», идет другим путем. Он использует поддержку нативных модулей ES (ESM) современными браузерами и делит процесс сборки на две части:

Во время разработки: Vite запускает сервер, но не собирает заранее все модули. Вместо этого он перехватывает запросы модулей от браузера, преобразуя и отдавая исходный код по требованию. Например, браузер запрашивает main.js, и Vite отдает его; main.js импортирует Button.vue, браузер отправляет новый запрос, и Vite отдает преобразованный Button.vue. Благодаря этому сервер разработки запускается почти мгновенно.
В производственной среде: Vite использует Rollup, еще один эффективный сборщик, чтобы создавать хорошо оптимизированные статические ресурсы.

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

3. Практические шаги миграции

Миграция существующего проекта с Webpack на Vite обычно включает следующие шаги:

a. Установить зависимости и создать файл конфигурации

Сначала установите Vite:

pnpm add -D vite @vitejs/plugin-react # 或 @vitejs/plugin-vue

Затем создайте vite.config.js в корне проекта:

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

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

b. Переместить `index.html`

Webpack обычно размещает index.html в каталоге public и автоматически добавляет собранный JS. Vite считает index.html точкой входа приложения. Нужно переместить его в корень проекта и вручную добавить ссылку на скрипт:

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

c. Заменить плагины Webpack

Нужно найти плагины Vite, соответствующие Loaders и Plugins из Webpack. Экосистема сообщества очень богата, и решение найдется для большинства задач.

Webpack	Vite
`babel-loader`	`@vitejs/plugin-react` (Babel встроен)
`vue-loader`	`@vitejs/plugin-vue`
`file-loader`	Встроено в Vite
`webpack-dev-server`	Сервер разработки встроен в Vite

d. Обработать переменные окружения

В Webpack мы привыкли использовать process.env.NODE_ENV. В Vite доступ к переменным окружения осуществляется через import.meta.env, например import.meta.env.VITE_API_URL.

e. Настроить псевдонимы путей

Псевдонимы путей в vite.config.js настраиваются очень просто:

import path from 'node:path'
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

4. Результаты после миграции

После миграции на Vite самое заметное впечатление — скорость.

Время запуска сервера разработки сократилось с 50 секунд до 2 секунд.
Время горячего обновления уменьшилось со средних 3–5 секунд до почти незаметных десятков миллисекунд.
Файл конфигурации (vite.config.js) стал значительно проще, чем webpack.config.js.

Заключение

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