Почему выбирают Вите
По мере того, как мы начинали создавать все более и более крупные приложения, объем обрабатываемого кода JavaScript увеличивался в геометрической прогрессии. Довольно распространены большие проекты с тысячами модулей. Инструменты, разработанные на основе JavaScript, начинают сталкиваться с узкими местами в производительности: обычно требуется много времени (даже минуты!) для запуска сервера разработки, и даже при горячей замене модулей (HMR) эффект модификации файлов проявляется через несколько секунд. в браузере. Такой цикл продолжается и продолжается, и медленная обратная связь сильно повлияет на эффективность разработки и удовлетворенность разработчика.
Vite стремится решить вышеуказанные проблемы, используя преимущества новых разработок в экосистеме: браузеры начинают изначально поддерживать модули ES, а все больше и больше инструментов JavaScript пишут на скомпилированных языках.
Преимущества Вайт
- В среде разработки не требуется никаких операций по упаковке, и ее можно быстро запустить в холодном состоянии.
- Легкая и быстрая горячая перезагрузка (HMR).
- Настоящая компиляция по требованию, больше не нужно ждать, пока будет скомпилировано все приложение. Традиционная компиляция веб-пакета: каждый раз, когда выполняется компиляция, каждый маршрут будет найден через входную запись, а затем будут загружены соответствующие модули каждого маршрута, а затем упакованы в файл bundle.js, и, наконец, сервер будет уведомлен о горячее обновление. Другими словами, подождите, пока все файлы будут загружены, прежде чем отображать обновленную страницу == "slower
- Компиляция Vite: в отличие от традиционной сборки, vite сначала подготовит обновление сервера, затем найдет файл записи, а затем динамически найдет маршрут для загрузки, чтобы скомпилировать модуль по этому маршруту, аналогично загрузке по требованию, с меньшим общий размер и обновление быстрее.
Проект быстрой сборки Vite-Cli
1. Соответствующие приготовления
- Vite требует версии Node.js> = 12.2.0. Однако для работы некоторых шаблонов требуются более высокие версии Node.js, обновите их, если ваш менеджер пакетов предупредит вас. Вы можете управлять несколькими версиями Node на одном компьютере с помощью n, nvm или nvm-windows. Чтобы узнать, как установить Node.js, см. nodejs.org. Если вы не уверены, какая версия Node.js работает в вашей системе, запустите node -v в окне терминала.
- Диспетчер пакетов npm Поскольку мы обычно используем каркас, предоставляемый Vite, для построения структуры проекта, нам необходимо загрузить и установить пакет npm и npm >= 6. , вам нужен менеджер пакетов npm. В этом руководстве используется интерфейс командной строки клиента npm, который по умолчанию установлен на Node.js. Чтобы проверить, установлен ли у вас клиент npm, запустите npm -v в окне терминала.
2. Создайте проект
1. Базовое создание:
используйте npm:
npm create vite@latest
Используйте пряжу:
yarn create vite //yarn
Используйте пнпм:
pnpm create vite
2. Укажите имя проекта и шаблон для использования, например, для сборки проекта Vite + Vue запустите:
//项目名：my-vue-app； 模板：vue
npm create vite@latest my-vue-app --template vue // npm 6.x
npm create vite@latest my-vue-app -- --template vue //npm 7+
yarn create vite my-vue-app --template vue //yarn
pnpm create vite my-vue-app -- --template vue //pnpm
3. Запустите проект
Сначала перейдите в свой собственный проект: cd my-project, затем:
npm install
npm run dev