Последняя статьяYou Yuxi - дьявол, Vite 3 дня 10 обновлений》 рассказал о причинах появления Webpack, серии инструментов для упаковки.
Появление этих инструментов состоит в том, чтобы решить проблему совместимости на окружающую среду модулей модулей ES модулей самой системы, а также частой сетевой запросы, отправляющей и модульную дивергенцию, вызванную разбросанными файлами модулей и т. Д.
Теперь, когда у вас есть WebPack, то весь особенно большой тусклый вите в конце его конца?
По сути, webpack — это сборщик статических модулей для современных приложений JavaScript.
Инструмент создания шаблонов Vue vue-cli использует веб-пакет для упаковки.Во время разработки вы можете запустить локальный сервер разработки и просмотреть его в режиме реального времени. Сервер разработки запускается медленно, поскольку необходимо упаковать весь файл проекта.
Та же проблема существует для горячего обновления HMR после изменения файла во время разработки.
Горячее обновление Webpack будет пересобирать и упаковывать с текущим измененным файлом в качестве точки входа, и все задействованные зависимости также будут перезагружены один раз.
Vite очень хорошо решает две вышеупомянутые проблемы.
**Вопрос об упаковке в первую очередь. **vite запускает сервер только для статической страницы и не упаковывает код файла.Сервер будет загружать различные модули в соответствии с запросом клиента для достижения реальной загрузки по требованию.
Для проблем с горячими обновлениями, vite использует метод немедленной компиляции текущего измененного файла. В то же время vite также будет использовать механизм кэширования (http cache => встроенный кэш vite) для загрузки обновленного содержимого файла.
Поэтому вит имеетБыстрый холодный старт, компиляция по требованию, горячее обновление модуляи другие хорошие характеристики.
Подводя итог, все еще существует большая разница между проектом сборки vite и проектом сборки vue-cli в режиме разработки:
**1, **Vite может работать напрямую без упаковки в режиме разработки, используя модульные правила загрузки ES6; в режиме разработки Vue-CLI проект должен быть упакован для запуска.
**2, **Vite основан на горячем обновлении кеша, Vue-CLI основан на горячем обновлении Webpack.
Сказав так много, как следует использовать вите?
Хотя он еще не был официально выпущен,ДокументацияЭто почти написано.
Давайте просто использовать его.
| Убедитесь, что версия узла больше или равна 12.
Используйте команду npm:
$ npm init @vitejs/app
Или используйте команду Пряжа:
$ yarn create @vitejs/app
После того, как команда будет выполнена, она позволит нам выбрать, какой проект фреймворка построить, и здесь я напрямую выберу vue.
Если вы не хотите делать выбор в командной строке, вы можете указать определенные шаблоны.
$ npm init @vitejs/app my-vue-app --template vue
Обратите внимание, что независимо от метода сборки загружается только шаблон кода проекта. Для запуска необходимо повторно установить сторонние расширения, необходимые для запуска проекта.
Перейдите в каталог проекта, установите необходимые зависимости и запустите проект:
cd <my-project>
npm install (or `yarn`)
npm run dev (or `yarn dev`)
Через файл package.json мы можем увидеть команды для запуска и упаковки.
Запустите сервер разработки с помощью команды npm run dev.
Просмотрите текущие результаты:
Используйте команду сборки npm run для упаковки:
Следует отметить, что упакованный код по-прежнему должен обеспечивать локальный статический сервер для запуска.
На этом опыт заканчивается. Если вы хотите почувствовать скорость обновления великого дьявола, вы можете перейти кgithubпосмотри.