Vite – новый король ассетов в Laravel. Обзор Laravel update v.9.19

Vite – это французское слово, означающее «быстрый» (с англ. «Quick»), да и он действительно быстрый.

Изменения

Для начала давайте посмотрим на изменения – я установил свежий Laravel версии 9.19, и мы сходу не видим в новом проекте Webpack.mix.js, но да то нас встречает Vite.Config.js. Друзья, само собой Vite, так же как и Mix скомпилируют наши frontend ассеты. И если мы взглянем на первоначальный конфиг Vite, то концепция такая же. Есть файлы на входе и они будут компилироваться в готовые бандлы. Давайте откроем старый Webpack.mix.js, и здесь у нас тоже самое, у нас есть файлы на входе, только здесь мы ещё указываем - куда именно будем их компилировать. В Vite директория для скомпилированных файлов в папке «public» немножко изменилась – добавилась ещё директория «build», но об этом мы поговорим немного позже. Также изменился package.json – здесь само собой изменились зависимости, убрали Mix, добавили Vite и изменились команды запуска. Раньше нам нужно было компилировать ассеты с помощью «npm», «run», «dev», «watch», «head» и так далее. Теперь суть примерно такая же, но только в двух новых командах:

• “vite” для локальной разработки
• “vite build” для продакшен

Но при этом компиляция будет в разы быстрее и удобнее, при сравнении на средних проектах в два раза быстрее.

Как вернутся к Mix?

Окей, прежде чем поиграемся с Vite, давайте начнём с вопроса – как быть если хочу вернуться к Mix? Да друзья, причины могут быть не только в консерватизме, а возможно какие-то зависимости не хотят работать с Vite. Я начал встречать подобные сообщения от коллег о несовместимости, по-этому всё может быть. Возвращаясь к теме, давайте взглянем на Commit с изменениями - вот ссылка.

По нему вы можете сделать обратное и вернуть всё как было и в вашем проекте как и раньше будет главенствовать Mix. Просто пройдитесь по коммиту и верните всё как было. Работы здесь на пару минут.

Также друзья, я нашёл статью на «Laravel news», как мигрировать старый проект на вид с множеством различных материалов - можете ознакомиться.

Начало работы

Итак друзья, давайте заведём наш проект Laravel + Vite и поговорим о особенностях. Начнём мы, само собой, с установки js зависимостей, тоже самое как это было и с Mix, по-умолчанию само собой они не установлены.Вписываем

npm install

ждём установку. Далее как я уже говорил ранее, чтобы скомпилировать все ассеты, нам потребуются новые команды, не «npm», «run», «dev» и так далее, а просто «vite», давайте попробуем. У нас пока что локальная разработка, мы говорим о ней, запускаем команду и видим, что у нас есть некий локальный сервер (о нём мы поговорим чуть позже), нам в целом о нём знать особо и не нужно, но обязательно о нём поговорим. Также мы видим в консоли «URL» нашего Laravel проекта, если я сейчас по нему перейду, то меня встретит отсутствующая страница, так как веб-сервер у меня не запущен.

Давайте вернёмся и я запущу PHP виртуальный сервер. команда Готово, можно сразу изменить «.env, APP_URL» на мой локальный, чтобы также в консоли Vite мы видели его, а не тот, который не существует. Теперь уже видим наш «APP_URL» - новый из «.env», откуда Vite берёт этот URL и здесь мы уже видим что у нас всё работает.

Итак, друзья, всё у нас работает, единственное, что если мы зайдём и посмотрим, никаких ассетов, никаких скомпилированных стилей и скриптов у нас здесь нет, мы их не добавляли, по-этому Vite как бы работает, но толку от этого мало. Давайте их подключим. Откроем наш «welcome.blade» и здесь добавим наши ассеты. Ранее, когда мы работали с Mix, мы бы здесь стандартно добавили стили и скрипты, и путь указали с помощью хэлпера Mix и здесь бы уже указали путь на скомпилированные файлы, которые у нас располагаются в директории «public». С Vite иначе. У нас для удобства появилась новая blade-директива Vite, которая принимает массив, и здесь мы указываем все необходимые файлы из «resources», которые мы будем компилировать и собирать на лету. Давайте укажем:

@vite(['resources/css/app.css', 'resources/js/app.js'])

Соответственно набор может быть любой другой, «css» файлов может и не быть, тут всё зависит от вас.

Давайте теперь обновим браузер и посмотрим что у нас при этом произошло, откроем инспектор, видим, что ошибок у нас нет, видим что Vite законектился. Что это из себя представляет? Если мы откроем «head», то здесь мы уже увидим наши ассеты, стили и скрипты, а также Vite клиент. Дело в том, что когда мы запускали с вами команду «Vite», мы также подняли локальный websocket сервер, на котором располагаются и компилируются наши ассеты и они будут перекомпилироваться в момент изменения, не только ассеты, а также и изменения в blade и нам не потребуется перезагружать браузер. Все изменения мы будем видеть на лету и это будет гораздо быстрее, чем с Mix.

Давайте взглянем как это работает. Вернёмся в наш «welcome.blade» и всю контент часть body удалим, далее откроем браузер, я ничего не перезагружал, но при этом у нас сразу всё обновилось, то есть это добавит удобства для работы с двумя мониторами, все изменения вы будете видеть на лету и они будут появляться мгновенно. Vite с этим работает намного быстрее, так как разбивает всё на модули, отслеживает изменения только в модулях и перезагружает их. С этим разобрались. То есть Vite, когда мы выполняем команду Vite запускает websocket сервер и с него мы работаем с нашими ассетами и всё у нас обновляется в реальном времени без перезагрузки браузера, вот такое удобство.

А как быть с продакшеном?

Друзья, я думаю у вас возник этот вопрос, там нам точно не нужен websocket коннект с ассетами и файлы должны быть скомпилированы, резонный вопрос. И смотрите, если мы сейчас остановим команду Vite и вернёмся в браузер, обновимся, то нас ждёт ошибка. И это на самом деле хорошие новости, так как деректива Vite в нашем blade всё делает за нас и нам не придется добавлять самим условия, что если у нас локальная разработка, то грузи ассеты по websocket, а на продакшен - бери файл из паблика с указанием перечня всех скомпилированных файлов. Нам же с вами всего лишь нужно их для начала скомпилировать после завершения локальной разработки и перед выгрузкой в продакшен, это команда «vite.build», мы её видим в «package.json», и она у нас компилирует все необходимые ассеты. Располагаются они у нас в директории «public» > «build» > «assets», здесь у нас все скомпилированные файлы и «manifest.json», обновимся, и увидим, что у нас всё работает. Но уже теперь ассеты у нас грузятся не по websocket коннекту, а напрямую подгружаются все необходимые файлы.

В итоге, что нужно знать о Vite, это стало удобнее и, самое главное, быстрее. Компилируется только то, что изменилось. Внесли изменения в .blade файле, нам по websocket коннекту отдали новый файл. Тоже самое и с css и js, с этим я думаю всё понятно.

Работа с Vue

Давайте сейчас подключим Vue, это также частый вопрос. Посмотрим как это делается с Vite и в чём отличие от работы с Mix. Само собой друзья под рукой держим документацию Vite чтобы вносить необходимые изменения в конфигурацию в рамках ваших задач. ссылка
Погнали ставить Vue. Давайте для начала вспомним как мы это делали по старинке с Mix, откроем проект старый с Mix, и здесь мы изначально само собой с помощью npm устанавливали Vue, а далее в Mix добавляли поддержку Vue, после чего уже в «resources», в «app.js» мы работали с Vue. С Vite ничего кардинально не изменилось. Давайте попробуем, вернёмся в новый проект, для начала установим Vue,

npm install vue@lastest

Окей, Vue установлен, теперь нам также необходимо установить плагин, подобно тому, который уже здесь есть, Laravel плагин, только для Vue, давайте его установим:

npm install @vitejs/plugin-vue

Ждём установку. Отлично, далее его здесь импортируем. Окей, и точно также как и с Mix мы просто добавляем поддержку Vue.
Окей друзья, далее давайте запустим Vite, пусть ассеты будут приходить в реальном времени через websocket, далее идём в «app.js», здесь инициализируем Vue, здесь такой момент, я сразу вам о нём расскажу, возможно и вы столкнулись с этой проблемой, через просто Vue далее рендерятся компоненты, по-этому я импортирую через «esm:bundler».

Выводы

Друзья, резюмирую, во-первых, до релиза Vite в laravel я его ранее не использовал и сейчас погружаюсь в него вместе с вами. В целом, я доволен, стало только удобнее и быстрее. В dev разработке обновляется то, что изменилось, ассеты приходят по websocket коннекту, кто раньше не использовал «hot reload» будут рады, особенно с двумя мониторами. Обсудили с вами как вернуться в Mix, как мигрировать со старого Mix проекта к Vite, подключили Vue с небольшими особенностями в виде расширения Vue компонентов и инициализации новых версий Vue, скомпилировали все ассеты для продакшена, посмотрели в общем как это всё работает, как работает директива Vite в «blade», на этом друзья всё, все вопросы в комментарии, либо в наш телеграмм чат.