Laravel Mix如何从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

- Martyn Ball

---

尝试标记重复，但由于悬赏无法成功。请注意，这仅适用于webpack 4及更高版本。 - Excalibaard

@Excalibaard一直在尝试使用这个，但它并没有真正解决问题。没有被接受的答案，唯一的答案仍然会加载所有组件，即使它们没有被使用。 - Martyn Ball

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

- Martyn Ball

---

好的，谢谢。我会试一下的，因为我仍然在使用我已删除答案中的方法。 - Boussadjra Brahim