Как правильно хранить использовать на страницах сайта отдельные компоненты Vue?

Question

[Алексей Скляров]

Есть проект, на котором используется Vue для реализации сложных форм, уведомлений, системы комментирования и прочих элементов (которые являются отдельными компонентами и размещаются лишь на некотором числе страниц).

На данный момент у меня есть файл vue.app.js, с примерно таким содержанием:

vue.app.js

window.Vue = require('vue');
import './util/directives.js'
import store from './store/index.js'
import Vue from 'vue';
import Reviews from './components/Reviews.vue';
import Comments from './components/Comments.vue';
import Searchbox from './components/Searchbox.vue';
import CommentForm from './components/CommentForm.vue';
import ReviewForm from './components/ReviewForm.vue';
import NotificationsWidget from './components/NotificationsWidget.vue';
import Notifications from './components/Notifications.vue';
import AddResourceForm from './components/AddResourceForm.vue';
if ($('#reviews').length > 0) {
    new Vue({
      el: '#reviews',
      store,
      components: {
        Reviews
      },
    });
  }
// other code

Из кода видно, что, к примеру, блок с отзывами какого-либо материала встраивается так:

<div id="reviews">
     <reviews/>
</div>

Есть несколько видов форм, которые по аналогии подключаются на сайт:

Код подключения

if ($('#add-resource-widget').length > 0) {
      new Vue({
        el: '#add-resource-widget',
        store,
        components: {
          'add-resource-form' : AddResourceForm
        },
      });
    }

И сам html код:

<div id="add-resource-widget">
      <add-resource-form></add-resource-form>
</div>

Меня немного не устраивает такая лапша в коде, и по этой причине возник вопрос. Какие практики используются для выделения отдельных компонентов в собственные файлы, с дальнейшим подключением этого файла на той странице, где он действительно нужен?

То есть, возможно, можно подключить на всем сайт vue бандл с директивами, Store. А далее на необходимых страницах подключать отдельные компоненты, которые необходимы только на этой странице. Есть ли в этом смысл? Насколько я знаю, серверу лучше отправить запрос на загрузку одного файла, чем, например на 10.

Comments

[WapSter]

Жуть какая используй vuerouter подключай компоненты страниц и в этих компонентах подключай нужные для данной страницы

[Алексей Скляров]

WapSter, у меня нет vue-роутов, сам сайт работает на Laravel, и роуты определяются в нем.

Answer 1

[Сергей delphinpro]

Да не стоит заморачиваться разделением компонентов на отдельные файлы.
Собирайте один бандл. По крайней мере пока он меньше 200-300kb точно не стоит.
Потом можно использовать встроенный в webpack code splitter/ Например через magiс comments

Сами компоненты я монтирую так

<div id="calculator"></div>

export function mountVueComponent(targetId, component) {
    if (document.getElementById(targetId)) {
        new (Vue.extend(component))().$mount(`#${targetId}`);
    }
}

import Calculator from '....';
mountVueComponent('calculator', Calculator);

Или так

<div class="mini-calc"></div>

Array.from(document.querySelectorAll('.mini-calc')).forEach(el => {
    let yandexGoal = el.dataset['goal'];
    new Vue({
        el    : el,
        render: createElement => createElement(Calculator, {
            props: {
                displayAs: CALC_DISPLAY_AS_MINI,
                yandexGoal,
            },
        }),
    });
});