javascript - defineAsyncComponent 中的 ES6 命名导入

Question

我想异步加载我的网络应用程序的一些元素:

这是旧的导入:

import {Popover, PopoverButton, PopoverPanel} from '@headlessui/vue'

export default {
    components: {
        Popover,
        PopoverButton,
        PopoverPanel,
    },
...

现在我想这样做:

import {defineAsyncComponent} from "vue";

export default {
    components: {
        Popover: defineAsyncComponent(() =>
            import( {Popover} from "@headlessui/vue" ) // This does not work as I get the error " ')' expected"
        ),
        ...
    },
...

知道如何解决这个问题吗？

Answer 1

Static import 是一个声明，不应该在任何地方使用，只能在模块的顶部使用。动态 import() 是一个表达式，遵循表达式中使用的 JavaScript 语法。

import() 返回模块导出的 promise 。应该是:

Popover: defineAsyncComponent(async () => {
 return (await import("@headlessui/vue")).Popover;
})

Tree shaking 对于动态导入的模块是禁用的，需要为打包器进行注释，例如Webpack .