У меня есть простое приложение Laravel с тремя маршрутами: /page1, /page2 и /page3.
На каждой из этих страниц будет компонент root VueJS, и существенное дерево подкомпонентов. Большинство подкомпонентов будут указаны c для их страницы, но некоторые будут распределены по страницам.
Я использую Laravel шаблон UI, так что это означает ES6, одностраничный VueJS компоненты, NPM и Webpack.
Насколько я вижу, у меня есть два варианта структурирования приложения VueJS. Первым вариантом будет создание точки входа для каждой страницы (page1.js, page2.js и page3.js). Проблема этого подхода заключается в том, что любой код для общих компонентов дублируется в скомпилированных ресурсах. (Я понимаю, что могу настроить Webpack для дедупликации, но я бы вообще не хотел прикасаться к Webpack).
Другой вариант - иметь одну точку входа, app.js. В этом файле будут созданы три разных экземпляра Vue, каждый из которых будет привязан к отдельному элементу DOM #app-1, #app-2, #app-3. Каждая из моих страниц будет иметь только соответствующий элемент DOM. Вопрос, однако, в том, сколько клиентской памяти потребуют несвязанные Vue экземпляры?
Например, если веб-страница содержит #app-1, то #app-2 и #app-3 останутся несвязанными. Я ожидал бы, что они займут немного немного памяти, но будут ли они занимать количество, пропорциональное только простому экземпляру Vue или пропорциональное всему их дереву подкомпонентов?