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

Posted 2023-02-23

【中文标题】Laravel 从 vue 文件中混合延迟加载组件

【英文标题】：Laravel Mix lazy load components from vue files

【发布时间】：2020-08-02 09:01:37

【问题描述】：

我试图从文件中加载组件，而不是在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

【问题讨论】：

Duplicate. 尝试过标记，但由于赏金而没有奏效。请注意，这只适用于 webpack 4 及更高版本。

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

【参考方案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)));
);

【讨论】：

好的，谢谢，我也会尝试一下，因为我仍在使用已删除答案中的方法