如何在Vue中延迟加载插件？

Question

Vue插件通常需要通过Vue.use(somePlugin)在应用程序入口点进行全局设置。这样做会增加所有页面的捆绑包大小，这通常很不好，最好将模块的下载推迟到实际使用该模块时，也就是延迟加载或代码拆分。 / p>

如果我的Vue应用程序中只有一页需要插件，我该如何延迟加载？

Answer 1

您可以创建一个返回诺言的匿名函数，因此仅当该组件实际呈现时才导入。

export default {
  components: {
    Slide: () => import("vue-burger-menu")
  }
};

您可以在docs

中了解更多信息

Answer 2

要更直接地回答OP的问题：您不能延迟加载插件。

根据documentation的定义，插件提供了可全局访问的功能，必须在创建Vue实例之前使用Vue.use()进行设置。因此，它们将始终与整个Vue实例捆绑在一起（例如，在供应商块中）。

您想要的是在组件级别的较小范围内延迟加载功能。根据插件的不同，插件模块还应该支持某种在组件级别like this one does上的直接代码导入。因为它仅使用import条语句，所以它们可以是async loaded。

TL; DR：任何使用Vue.use()的内容都不能延迟加载。可以import进行异步操作。

Answer 3

其中一种方法是在创建/挂接的钩子中调用插件文件，然后执行所需的操作。

Answer 4

只需在特定页面上导入它，例如“ vue-burger-menu”中的“ Slide”

<script>
import { Slide } from "vue-burger-menu"

export default {
  components: {
    Slide
  }
}
</script>