面试题：Qwik 中延迟加载的基本实现方式是什么

1. 代码拆分（Code Splitting）

Qwik 使用 Rollup 等工具进行代码拆分，将应用程序代码分割成更小的块。这样在初始加载时，只需要加载必要的代码，其他部分可以在需要时异步加载。例如，路由组件可以被拆分成单独的代码块，只有在用户导航到相应路由时才会加载。

2. 路由懒加载

配置方法：在 Qwik 的路由配置中，可以使用动态导入（Dynamic Imports）来实现路由组件的懒加载。例如：

import { qwikCity } from '@builder.io/qwik-city';
import type { QwikCityPlan } from '@builder.io/qwik-city';

const plan: QwikCityPlan = {
  routes: [
    {
      path: '/about',
      component: () => import('./routes/about.tsx')
    }
  ]
};

export default qwikCity(plan);

这里 () => import('./routes/about.tsx') 表示该路由对应的组件将在用户访问 /about 路径时才会加载，而不是在应用启动时就加载。

3. 组件懒加载

Lazy 组件：Qwik 提供了 Lazy 组件用于延迟加载子组件。通过将子组件包裹在 Lazy 组件内，只有当 Lazy 组件进入视口（或满足特定条件）时，才会加载子组件。

import { component$, Lazy } from '@builder.io/qwik';

export const MyComponent = component$(() => {
  return (
    <div>
      <Lazy load={() => import('./LazyLoadedComponent.tsx')}>
        {(Component) => <Component />}
      </Lazy>
    </div>
  );
});

在上述代码中，LazyLoadedComponent.tsx 组件会在 Lazy 组件的条件满足时才加载，load 属性接受一个返回动态导入的函数，并且通过一个函数作为子元素来渲染加载后的组件。

4. 资源按需加载

策略配置：Qwik 允许开发者配置资源（如 CSS、图片等）的加载策略。对于一些非关键资源，可以配置为延迟加载。例如，对于图片资源，可以使用 loading="lazy" 属性来实现浏览器层面的懒加载，Qwik 也可以结合这种方式，在组件渲染逻辑中进行相应的处理，确保资源在合适的时机加载。

5. Qwik 的 Streaming 特性结合懒加载

工作原理：Qwik 的 Streaming 允许将渲染结果以流的形式发送到客户端。结合懒加载，在服务器端渲染（SSR）过程中，可以先发送首屏关键内容，而将一些非关键的、可延迟加载的部分留在后续处理。当客户端与服务器交互时，根据用户操作或视口变化等条件，再按需加载其余部分，提升用户体验。

星途面试题库