Laravel 从 vue 文件中混合延迟加载组件

Question

我试图从文件加载组件而不是在app.js.

因此，延迟加载的组件定义如下所示：

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

最终使用了下面的代码。我认为看过之后，它类似于 Excalibaard 发布的内容，但我无法让它为我工作：

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)));
});