Оглавление
Блок-схема запуска Webpack и Vite на официальном сайте
Сравнение времени запуска проектов Webpack и Vite
Создать напрямую с помощью дополнительной командной строки
Запустите проект с помощью vscode
Примечание. Здесь создается проект vue3+vite.
Зачем использовать Vite
По сравнению с вебпаком, Vite запускается быстрее.
Сравнение веб-пакета и Vite
Инструкции по анализу
Vite использует предварительно созданные зависимости esbuild, которые написаны на Go и работают быстрее, чем предварительно созданные зависимости упаковщика, написанные на JavaScript.
Когда веб-пакет запускается, он анализирует зависимости, затем компилирует и упаковывает его и, наконец, передает на локальный сервер для рендеринга. Следовательно, чем больше модулей у проекта, тем больше у него зависимостей и тем медленнее он будет запускаться.
Даже если используется горячее обновление модулей (HMR), по мере увеличения количества модулей размер упакованного пакета файлов будет увеличиваться, что замедлит скорость ответа.
При запуске Vite первым запускается сервер разработки, а при запросе модулей они также будут динамически компилироваться и отображаться по требованию.
Поскольку современные браузеры изначально поддерживают ES-модуль, они автоматически отправляют запросы к зависимым модулям.
Таким образом, Vite использует файлы модулей в среде разработки в качестве исполняемых файлов браузера вместо того, чтобы упаковывать их, как веб-пакет, и передавать на локальный сервер.
Таким образом, Vite необходимо упаковывать файлы в файлы пакетов при запуске, поэтому нет необходимости анализировать зависимости между модулями и компилировать содержимое определенного модуля только при необходимости.
При смене модуля нет необходимости один раз компилировать модуль и зависимые модули, как веб-пакет, поэтому эффективность горячего обновления будет выше.
Блок-схема запуска Webpack и Vite на официальном сайте
веб-пакет:
быстро:
Сравнение времени запуска проектов Webpack и Vite
Создать проект
Создаем шаг за шагом
1. Используйте команду npm create vite@latest.
2、 Хорошо, продолжить? (у)
3. Введите название проекта: Название проекта: » vite-project
4. Выберите рамку
5. Выберите язык
Скриншоты всего процесса:
Создать напрямую с помощью дополнительной командной строки
Используйте дополнительные параметры командной строки, чтобы напрямую указать имя проекта и шаблон, который вы хотите использовать, следующим образом:
Команда версии npm 6.x:
npm create vite@latest my-vue-app --template vue
npm — это команда для версии 7 или выше:
npm create vite@latest my-vue-app -- --template vue
Процесс выполнения следующий:
Запустите проект с помощью vscode
Примечание. Vite необходимо установить перед первым запуском проекта, в противном случае будет сообщено об ошибке.
Перезапустите проект после выполнения команды установки npm:
Интерфейс после запуска:
Ссылка на официальный сайт
Если вы хотите узнать более подробную информацию, вы можете посетить официальный сайт:
Официальный сайт vue3: https://cn.vuejs.org/
Официальный сайт vite: https://vitejs.cn/