面试题：SvelteKit 路由参数处理及动态路由优化

确保路由参数类型安全：
- 验证参数类型：
  - 在 SvelteKit 中，可以在 load 函数中验证动态路由参数的类型。例如，对于 /posts/[id] 路由，在 +page.server.ts 文件中：

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params }) => {
    const id = parseInt(params.id);
    if (isNaN(id)) {
        throw new Error('Invalid id. Expected a number.');
    }
    return {
        postId: id
    };
};

类型标注：
- 在 +page.ts 中定义 load 函数返回类型时，对参数进行类型标注。例如：

import type { PageLoad } from './$types';

type PageData = {
    postId: number;
};

export const load: PageLoad<PageData> = async ({ params }) => {
    const id = parseInt(params.id);
    if (isNaN(id)) {
        throw new Error('Invalid id. Expected a number.');
    }
    return {
        postId: id
    };
};

性能优化：
- 缓存：
  - 客户端缓存：如果数据变化不频繁，可以使用 Svelte 的响应式缓存机制。例如，在组件中使用 $: let cachedData = someFunctionThatFetchesData(params.id);，Svelte 会自动跟踪依赖并缓存结果，只要 params.id 不变，就不会重新执行 someFunctionThatFetchesData。
  - 服务器端缓存：可以使用 HTTP 缓存头（如 Cache - Control 和 ETag）。在 load 函数中设置响应头，例如：

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params }) => {
    const id = parseInt(params.id);
    if (isNaN(id)) {
        throw new Error('Invalid id. Expected a number.');
    }
    const response = {
        postId: id
    };
    return {
       ...response,
        headers: {
            'Cache - Control':'max - age = 3600' // 缓存1小时
        }
    };
};

代码拆分：对于包含动态路由的页面，如果有较大的代码块，可以使用 SvelteKit 的代码拆分功能。例如，使用动态导入组件：

<script>
    let PostComponent;
    const loadPostComponent = async () => {
        PostComponent = (await import('./Post.svelte')).default;
    };
    loadPostComponent();
</script>

{#if PostComponent}
    <PostComponent {postId}/>
{/if}

这样只有在需要时才加载 Post.svelte 组件，减少初始加载时间。

星途面试题库

面试题：SvelteKit 路由参数处理及动态路由优化

知识考点

面试题答案