Nuxt vs Vue: SPA battle
Часто встречается вопрос: чем отличается Nuxt от Vue? Ответ срывается с языка: Nuxt поддерживает SSR из коробки. Но что если попытаться ответить на этот вопрос забыв о рендеринге на сервере?
При строительстве приложения на Vue, разработчик берет строительные блоки из его экосистемы. Эти блоки кладутся друг на друга и склеиваются написанным вручную кодом. При необходимости их можно заменить на альтернативные или вообще отказаться от них. Такой низкоуровневый подход дает гибкость, но усложняет процесс.
Но что если ты клепаешь проекты за проектами которые состоят из одного и того же проверенного набора строительных блоков. Ты склеиваешь их одним и тем же кодом, либо даже если vue-cli частично делает это за тебя, не удобнее ли брать для работы уже склеенный кем-то рабочий набор? В этой ситуации и было бы полезно использовать Nuxt, который как раз и представляет собой такой набор: Vue, Vue-router, Vuex, Webpack и еще немного всякой мелочи.
Wow
Кроме кода склеивающего перечисленные строительные блоки, Nuxt содержит удобные разъемы и кронштейны для каждого из них. Например Vuex можно разбить на модули, Nuxt подключит их автоматически по названию файла. Vue-router по-умолчанию не требует файла который ставит в соответствие роуты компонентам, это делается автоматически с помощью файловой структуры. В сам Vue, Nuxt включает анимационный прелоудер, анимационные переходы между страницами и заполняем ему тэг <head>.
Так же Nuxt имеет свою структуру проекта: то что раньше во Vue совалось в main.js, теперь можно разбить по плагинам, основные настройки можно засунуть в конфиг, в директории проекта больше нет папок для билда с конфигами вебпака - это все абстрагировано от разработчика.
Не буду распинаться про многие другие функции, которые в том числе можно доустановить в Nuxt в виде модуля.
Meh...
- Ипонский магнитофон! Звучит круто, но что если я пользуюсь не всеми свистоперделками которыми обвешаны мои строительные блоки? - спросит читатель. Да ничего, пусть себе висят. Как говорится, работает - не трожь. Этот оверхед - плата за удобство и скорость разработки.
Другое дело если этот дополнительный функционал работает не так как нужно или мешает. Это редкость, но такой риск тоже есть. Nuxt заточен под большинство более-менее одинаковых проектов, нетривиальные проблемы в нем решить бывает сложнее чем в чистом Vue.
Так же не стоит забывать что чтобы все эти ништяки работали, нужно изучить документацию и Vue и Nuxt. Судя по вопросам в чатах, для некоторых людей это проблема.
Достаточно теории
Я тут на днях сделал и задеплоил демо-блог в SPA режиме используя [email protected] и перенес его на классический Vue с вебпаком. Не специально для этой статьи, но сойдет. Исходники можно сравнить тут. Давай глянем что нам дает Nuxt и чем за это приходится платить.
| Время сборки | Зависимостей | Вес node_modules | Вес главной страницы | LoC | |
|---|---|---|---|---|---|
| Nuxt | 7сек | 4шт. | 108Мб | 95Кб | 444 |
| Vue | 7сек | 9шт | 115Мб | 83Кб | 491 |
Выводы
При прочих равных проект на Nuxt содержит меньше строк чем на Vue, но при этом у немного жирнее бандл. Если набор функционала проекта совпадает с большинством проектов под которые заточен Nuxt, то встроенные в него функции немного упростят разработку, но в нетривиальных случаях могут наоборот добавить гемора.
Будет ли удобнее с Vue или с Nuxt зависит также от команды и самого приложения. Как по мне, чистый Vue все таки для больших команд и больших проектов подходит лучше.