能否从前置页面预加载SPA及其JavaScript依赖？

当然可以在前置页面预加载目标SPA的资源，下面是几种实用的实现方式：

1. 用原生预加载API（link标签） #

浏览器原生支持preload和prefetch两种预加载方式，直接在前置页面的<head>中添加标签即可：

• preload：高优先级预加载，适合提前拉取目标SPA的核心JS资源
• prefetch：低优先级预加载，专门针对未来可能的导航，适合预加载整个SPA页面

示例代码：

<!-- 预加载目标SPA的核心JS文件，必须加crossorigin处理跨域 -->
<link rel="preload" href="https://test.mydomain.com/main.xxx.js" as="script" crossorigin>
<!-- 预加载整个SPA页面，低优先级后台加载 -->
<link rel="prefetch" href="https://test.mydomain.com" as="document">

注意：目标服务器必须配置CORS（返回Access-Control-Allow-Origin头），否则跨域资源预加载会失败；尽量只预加载关键资源，避免浪费用户带宽。

2. 借助Service Worker缓存预加载 #

Service Worker可以在后台独立运行，适合更灵活的资源缓存管理，步骤如下：

第一步：在前置页面注册Service Worker并发送预加载指令 #

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const swReg = await navigator.serviceWorker.register('/sw.js');
      // 给SW发消息，触发预加载任务
      swReg.active?.postMessage({
        type: 'PRELOAD_SPA',
        urls: [
          'https://test.mydomain.com/',
          'https://test.mydomain.com/main.xxx.js',
          'https://test.mydomain.com/vendor.xxx.js'
        ]
      });
    } catch (err) {
      console.error('Service Worker注册失败:', err);
    }
  });
}

第二步：在Service Worker中处理预加载并缓存资源 #

self.addEventListener('message', async (event) => {
  if (event.data.type === 'PRELOAD_SPA') {
    const cache = await caches.open('spa-preload-cache');
    // 批量缓存指定资源
    await Promise.all(
      event.data.urls.map(url => fetch(url).then(res => cache.put(url, res)))
    );
  }
});

注意：Service Worker有作用域限制，要确保它的文件位置能支持跨域资源的缓存操作；同样需要目标服务器开启CORS。

3. 动态脚本/资源预加载（手动控制） #

如果需要更自定义的逻辑，比如根据用户行为触发预加载，可以用JS动态处理：

方法A：动态创建script标签加载JS（会执行脚本） #

function preloadScript(url) {
  const script = document.createElement('script');
  script.src = url;
  script.crossOrigin = 'anonymous';
  script.onload = () => console.log(`已预加载: ${url}`);
  document.head.appendChild(script);
}

// 比如用户点击某个按钮时触发
document.getElementById('jump-btn').addEventListener('click', () => {
  preloadScript('https://test.mydomain.com/main.xxx.js');
});

方法B：用fetch缓存资源（不执行脚本） #

如果不想提前执行目标SPA的JS，用fetch把资源存入缓存即可：

async function prefetchResource(url) {
  const cache = await caches.open('manual-preload-cache');
  const res = await fetch(url);
  await cache.put(url, res);
}

// 提前缓存整个SPA页面和核心资源
prefetchResource('https://test.mydomain.com/');
prefetchResource('https://test.mydomain.com/main.xxx.js');

总结 #

• 追求简单直接：用preload/prefetch原生标签
• 需要离线支持或复杂缓存策略：用Service Worker
• 需要自定义触发时机：用动态JS预加载

内容的提问来源于stack exchange，提问作者noi.m