Дожил я с Vue.js до использования компонентных vue-файлов. Ну это те, где шаблон, стили и скрипт в одном файле. И как-то не до конца понимаю, почему все решили, что это очень удобно?
Не, я согласен, что в теории это звучит очень логично - мы в одном месте собираем все кирпичи, относящиеся к некой смысловой и функциональной единице. Разделение кода по зонам ответственности, как написано в документации. Но всё же возникают местами вопросы, местами недоумение.
1. Удобство сомнительно. На простеньких компонентах, скажем, не больше сотни строк на всё про всё - действительно, проблем нет, всё хорошо видно. Но потом резко плохеет, получается каша и всё равно тянет как-то разбить на файлы.
2. Что если я не хочу, чтобы сам Vue лез в общий бандл (использую Browserify + Vueify), а хочу его как обычно грузить с CDN? Это мне нужно перетащить его в dev-зависимости или что?
3. Обнаружил, что CSS-код оборачивается в какой-то жуткий "инсертор" и тоже засовывается в общий JS-бандл. Это бесит, поскольку я не понимаю, когда именно оно будет подгружено на страницу - не говоря о распухании бандла до больших размеров. Я хочу, чтобы JS-бандл был сам по себе, а CSS-бандл сам по себе - и подключить его обычным образом.
4. Если я хочу использовать глобальные миксины или переменные CSS-препроцессора, то мне приходится подключать их в каждый компонент персонально. Почему нельзя один раз, как было всю жизнь до этого? В интернете находятся люди с похожими проблемами, там длинные ветки обсуждений, предлагают гланды через анус лечить какие-то отдельные лоадеры прикручивать - я ничего не понял.
В общем, я склоняюсь к мысли, что нужно во vue-файлах оставлять шаблон и методы, а вот CSS выносить отдельно, как оно всегда и было. Но надо понять, как бы объяснить это сборщику. Это называется "не было у бабы забот, так купила порося".
1. Если плохеет, значит пора разбивать либо на компоненты, либо выносить стили/скрипты/шаблоны в отдельный файл и инклюдить их.
3. Не подскажу, сам использую vue-cli и webpack шаблон, при билде он делает отдельно css и отдельно js, причем вендорные js тоже отдельно.
4. Тут да, либо в компонент персонально, либо scss|less файл, который инклюдится в vue файл, а в нем инклюды переменных/миксинов+стили самого компонента.
2. Подключить Vue с CDN можно, но он все равно должен присутствовать в package.json в dev-зависимостях - иначе ругается vueify.
В дев-режиме сборки Vue будет добавляться в бандл, увеличивая его размер на ~200 кб. Но пугаться не нужно, в prod-режиме он исчезнет NODE_ENV=production
3. Выдрать CSS в отдельный бандл можно таким образом: https://github.com/vuejs/vueify#css-extraction
Ставить этот плагин отдельно не нужно, он есть уже из коробки.
Если собирать в дев-режиме, то стили вытаскиваются в отдельный файл в форматированном виде, если в прод-режиме - уже минифицированные.
В настоящий момент пытаюсь перетащить это из комстроки в Gulp - это отдельное увлекательное приключение.
(кто там говорил, что сборщики экономят массу времени? хыхы)
1 На самом деле удобно. Если компонент хочется разбить на файлы - это также просто делается
2 Подключить в index.html, убрав import из своих файлов (да и из packaje.json ил что там в browserify)
3 В webpack это называется extract text plugin для выноса в css и require.ensure для деления бандла на куски с асинхронной загрузкой (например для vue-router)
4 Глобальные примеси работают
да и воообще, оно все как-то больше заточено на webpack. так что ставьте vue-cli с шаблоном webpack-simple и вперед. и да, с шаблоном webpack все сложнее, так что лучше использовать упрощенный шаблон :)
2. Я так и рассуждал - убрал из package.json, убрал импорты, подключил CDN. Проверяю - работает. Но... смотрим бандл - а он весит 200 кб (тестовый проект совсем крошечный, там пара компонентов по несколько строк кода) и Vue сидит внутри как ни в чем ни бывало! Вероятно, vueify через зависимости тянет, больше вроде бы и нечему...
4. Я имел в виду примеси CSS-препроцессора, а не самого Vue
Но при этом, если убрать из index.html ссылку на подключенный с кдна Vue - всё ломается.
То есть в бандл он пихается непонятно кем и зачем, просто балластом.
Нашел вот такой инструмент анализа https://www.npmjs.com/package/disc
Он подтвердил, что сейчас Vue занимает >90% бандла.
И как это пресечь?
