Laravel Смешайте ленивые компоненты загрузки из vue файлов

Question

Я пытаюсь загрузить компоненты из файлов, а не определять их в app.js, но я также хочу лениво загрузить их, поэтому пытаюсь смешать 2 вместе.

Таким образом, определение лениво загруженного компонента будет выглядеть так:

Vue.component(
    'carousel', 
    () => import(
        /* webpackChunkName: "carousel" */
        './components/carousel.vue'
    )
);

А регистрация компонентов с использованием файлов выглядит так:

const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Как я могу объединить это?

Моя текущая попытка заключается в следующем, но, конечно, я пропустил webpackChunkName, так как понятия не имею, как это сделать:

const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], () => import(files(key)) ));

Однако это не работает, Я просто получаю сообщение об ошибке:

ПРЕДУПРЕЖДЕНИЕ в ./resources/js/app.js 9: 11-29 Критическая зависимость: запрос зависимости является выражением @ multi ./resources /js/app.js ./resources/sass/index.sass

Answer 1

Завершено с использованием приведенного ниже кода. Я думаю, что после просмотра, это похоже на то, что написал Экскалибард, но я не мог заставить это работать на меня:

const files = require.context('./components', true, /\.vue$/i, 'lazy');
files.keys().map(key => {    
    const name = key.split('/').pop().split('.')[0];
    Vue.component(name, () => import(/* webpackChunkName: "[request]" */'./components/' + key.slice(2)));
});