Question

考虑一下，页面/组件内部有4个组件，用户可以使用它们取决于他们的选择（例如：在Input comp || Image Comp || Video Comp || Vudio Comp之间切换）。我可以通过两种方式懒惰地加载它们，

1）

<template>
  <component :is="compName">
</template>
data: () => ({compName: 'input'}),
components: {
 input: () => import('/components/input'),
 video: () => import('/components/video'),
 audio: () => import('/components/audio'),
 image: () => import('/components/image'),
}

2）

<template>
  <component :is="loadComp">
</template>
data: () => ({compName: 'input'}),
computed: {
 loadComp () {
  const compName = this.compName
  return () => import(`/components/${compName}`)
 }
}

会有什么不同？哪种是动态导入的正确方法？预先感谢

Answer 1

主要区别是，在第二种情况下，Webpack在构建时不知道运行时compName的值是什么，因此它将自动为每个文件创建单独的包< / strong>放在/components/文件夹中。

来自docs

import（）必须至少包含有关模块位置的某些信息。捆绑可以限制为特定目录或文件集，以便在使用动态表达式时-包括可能在import()调用中请求的每个模块。例如，import('./locale/${language}.json')将导致.json目录中的每个./locale文件被捆绑到新块中。在运行时，计算完可变语言后，english.json或german.json之类的任何文件都可以使用。

您可以使用"magic comments"来调整应包含的内容和不包含的内容。例如，以下将仅捆绑文件夹中的.json个文件

import( /* webpackInclude: /\.json$/ */ `./locale/${language}`)

如果这是您想要的，那么进行动态导入的有效方法都是正确的。第二个优点很明显，您无需一一编写导入文件。...

第二的大不同是，在第一种情况下，组件已注册，您可以照常在模板中使用它们的名称：

<template> <input /> <video /> </template>

...而在第二种情况下解析的组件未注册，只能在<component :is="computed" />
中使用

导入计算机中的组件和vuejs动态导入中的组件时有什么区别？

1 个答案: