1. Есть многостраничное приложение, местами с полным сервер-сайд рендерингом (важно SEO). Используется VueJS
2. На разных страницах используются разные компоненты
Как лучше организовать разделение кода по файлам JS?
1. Подгружать к каждой странице отдельный JS-файл только с теми компонентами, которые там используются
2. Собрать все в один условный app.js, подключить его везде и в нем проверять, если элемент есть на странице, то монтировать в него компонент, а нет - так нет.
Я первый вариант юзаю. Я на ruby on rails делаю, там это реализовано "в коробке"
У меня получается есть application.js - тут пишу скрипты необходимые для всех страниц. Дальше подключается нужный page.js, в нем я подключаю необходимые для этой страницы модули и пишу код, используемый именно на это странице.
Для css так же.
При деплое рельсы автоматом собирают на каждую страницу свои минимимизированные файлы и получается, что в production для каждой страницы есть один маленький файл, в котором только нужный код для это страницы.
Как-то так.