异步组件

在现代前端应用中，按需加载是提升性能的重要手段。异步组件（Async Component）正是为此而生的一种机制，它允许你在真正需要某个组件时再去加载它，而不是一开始就将其打包进主应用中。这种方式不仅可以减少初始加载体积，还能配合路由或条件渲染实现更高效的资源管理。在 qingkuai 中，异步组件是通过组合使用异步处理相关指令实现的，整个过程无需特殊配置，使用方式简洁且具备良好的扩展性。

动态导入

很多构建工具会对动态导入的模块进行代码分割优化，对于组件我们也可以利用这一点：

        
            qk
        
        <lang-js>
    const ComponentModule = import("./Component.qk")
</lang-js>

<qk:spread
    #await={ComponentModule}
    #then={{default: Component}}
>
    <Component />
</qk:spread>

我们还可以为其添加加载状态以及加载失败时要展示的模板内容：

        
            qk
        
        <div #await={ComponentModule}>Loading...</div>
<qk:spread #then={{default: Component}}>
    <Component />
</qk:spread>
<div #catch>Fail to load Component.qk</div>

异步返回

我们还可以在自定义的异步逻辑中返回组件：

        
            
            qk
        
        

        <lang-js>
    import Comp1 from "./Comp1.qk"
    import Comp2 from "./Comp2.qk"

    async function getComponent(){
        return await isOk() ? Comp1 : Comp2
    }
</lang-js>

<div
    class="comp-box"
    #await={getComponent()}
    #then={ObtainedComponent}
>
    <ObtainedComponent />
</div>
    

在github上编辑此页面