javascript - 如何使用 vuejs 和 require.ensure 处理动态组件

Question

我有一个想法，我正在努力寻找最好的方法来实现。我正在使用 VueJS 和 webpack 2。我的场景是我想要一个组件列表，当用户单击某个项目时，我想按需加载这些组件。例如，我有一个数组，其中包含 5 个组件(YouTube、Facebook、Twitter、Pandora、Spotify)。我会使用 v-for 来重复使用 LI 元素的列表。

<li v-for="component in components" v-on:click="openApp">{{component.name}}</li>

我希望用户单击 li 并在我的 VueJS 实例上运行一个方法。因此就有了 v-on:click。 openApp 的方法如下所示:

openApp() {
    require.ensure(["./components/myComponent.vue"], function(){})
} 

我遇到的问题是我无法将名称动态传递给 require.ensure，如下所示。

openApp() {
    let name = "myComponent";
    require.ensure(["./components/" + name + ".vue"], function(){})
}

我明白为什么我不能这样做。然而，这给我带来了一些架构问题。对于每个项目，我都必须添加一个单独的函数，该函数基本上每次都执行相同的操作。对于 5 个项目来说这并不是什么大问题，但如果我达到 50、100、1000 个项目，事情就会变得很难看。我的问题是，解决这个问题的最佳方法是什么？我应该硬着头皮用冗余的 require.ensure 对每个方法进行硬编码吗？或者这是我缺少的一种更动态的方法？

Answer 1

webpack 应该能够使用 require.ensure 第一个参数中提到的模块创建一个新 block 。它确实支持动态发现模块，例如:

require.ensure(["./components/"+ name + ".vue"], function(){})

将创建一个包含 ./components/*.vue 位置的所有模块的 block - 即在构建过程中它将扫描目录并添加所有 *.vue 文件.

但是，如果在运行时您尝试require构建期间不存在的模块，则会失败。

虽然从技术上讲，您可以在一个 block 中创建很多组件，但您可能会重新设计您的应用程序，使其具有根据输入表现不同的单个组件。