Svelte游戏项目如何预加载所有组件及路由？

1. 提前创建Image对象预加载图片 #

在首页组件的onMount生命周期里，手动实例化Image对象加载目标页面的图片，浏览器会自动缓存这些资源，后续切换页面时直接读取缓存：

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    // 列出需要预加载的图片路径
    const preloadList = [
      '/images/hall-bg.png',
      '/images/create-room-btn.png',
      '/icons/player-avatar.png'
    ];

    preloadList.forEach(src => {
      const img = new Image();
      img.src = src;
    });
  });
</script>

2. SvelteKit项目用预加载API #

如果你的项目基于SvelteKit，直接用官方的preload方法提前加载目标页面的组件和关联资源，切换时资源已经就绪：

<script>
  import { preload } from '$app/navigation';
  import { onMount } from 'svelte';

  onMount(() => {
    // 提前预加载创建大厅页面的路由
    preload('/create-hall');
  });
</script>

3. 入口文件提前导入资源 #

在项目的入口文件（比如main.js）里直接导入需要预加载的图片，打包后这些资源会随首页一起加载并缓存：

// main.js
import './images/hall-bg.png';
import './images/create-room-btn.png';
// 按需添加其他资源

注意：这种方式会增加首页初始加载体积，只推荐预加载小体积的关键资源。

4. Service Worker缓存资源 #

注册一个Service Worker，在首页加载完成后主动缓存指定资源列表，哪怕用户刷新页面也能从缓存读取：

// sw.js
const CACHE_KEY = 'game-cache-v1';
const PRELOAD_RESOURCES = [
  '/images/hall-bg.png',
  '/images/create-room-btn.png',
  '/create-hall'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_KEY).then(cache => cache.addAll(PRELOAD_RESOURCES))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(res => res || fetch(event.request))
  );
});

在Svelte组件里注册Service Worker：

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js');
    }
  });
</script>

内容的提问来源于stack exchange，提问作者Ali Furkan