Конкретный рабочий процесс и различия между инструментами упаковки Webpack и Vite

1. Схема рабочего процесса Webpack и Vite

 2.Вот преимущества:

  1.  сервер веб-пакета запускается медленнее, чем Vite
  2. Поскольку vite не нужно упаковывать при запуске, нет необходимости анализировать зависимости модулей и компилировать, поэтому скорость запуска очень высокая. Когда браузер запрашивает необходимые модули, модули компилируются. Этот режим динамической компиляции по требованию значительно сокращает время компиляции. Когда проект больше и файлов больше, преимущества разработки на Vite становятся более очевидными.
  3. Горячее обновление Vite быстрее, чем веб-пакет
  4. С точки зрения HRM, когда содержимое определенного модуля меняется, просто позвольте браузеру повторно запросить модуль вместо перекомпиляции всех зависимостей модуля, как в случае с веб-пакетом.
  5. Vite использует esbuild (отредактированный Go) для предварительной сборки зависимостей, а веб-пакет основан на nodejs, который в 10-100 раз быстрее, чем node.

viteНедостатки:

  1. Экология не так хороша, как у вебпака, а загрузчик и плагин недостаточно богаты.
  2. При упаковке в производственную среду vite использует традиционный пакет для упаковки, а esbuild производственной среды недостаточно дружелюбен для CSS и разделения кода. Таким образом, преимущество vite отражается на стадии разработки.
  3. Не используется в больших масштабах, некоторые проблемы будут скрыты.
  4. Браузер разработки проекта должен поддерживать esmodule, но целевой объект не может распознать синтаксис commonis.

3. Рабочий процесс и разница между webpack и vite (общее объяснение)

  1. Рабочий процесс webpack и vite:
  2. Упаковка Webpack заключается в том, чтобы сначала проанализировать маршрут проекта, затем проанализировать модули, соответствующие этому маршруту, затем упаковать их все, а затем вызвать сервер, поэтому скорость компиляции низкая, и все неиспользуемые модули также упаковываются.
  3. Vite сначала вызывает сервер, подготавливает его напрямую, а затем видит, какой маршрут вы запрашиваете, а затем упаковывает только модуль, соответствующий этому маршруту. Если запрошенный маршрут отсутствует, он не будет упакован. Его можно скомпилировать и упаковать по требованию. без ожидания.Компилируется все приложение, что увеличивает скорость компиляции и время выполнения.

Supongo que te gusta

Origin blog.csdn.net/tianyhh/article/details/130772731
Recomendado
Clasificación