Safari中相对路径的modulepreload加载失败问题

问题背景 #

通过ESM方式引入Vega模块：

import vega from 'https://cdn.jsdelivr.net/npm/vega@5.30.0/+esm';

代码在Chrome、Edge、Firefox中运行无错误，但Safari会出现大量404请求。原因是该CDN响应头包含多个modulepreload类型的Link字段：

Link: </npm/vega-util@1.17.2/+esm>; rel="modulepreload"; nopush, </npm/vega-dataflow@5.7.6/+esm>; rel="modulepreload"; nopush, </npm/vega-transforms@4.12.0/+esm>; rel="modulepreload"; nopush, </npm/vega-view-transforms@4.6.0/+esm>; rel="modulepreload"; nopush, </npm/vega-encode@4.10.1/+esm>; rel="modulepreload"; nopush, </npm/vega-geo@4.4.2/+esm>; rel="modulepreload"; nopush, </npm/vega-force@4.2.1/+esm>; rel="modulepreload"; nopush, </npm/vega-hierarchy@4.1.2/+esm>; rel="modulepreload"; nopush, </npm/vega-label@1.3.0/+esm>; rel="modulepreload"; nopush, </npm/vega-regression@1.3.0/+esm>; rel="modulepreload"; nopush, </npm/vega-voronoi@4.2.3/+esm>; rel="modulepreload"; nopush, </npm/vega-wordcloud@4.1.5/+esm>; rel="modulepreload"; nopush, </npm/vega-crossfilter@4.1.2/+esm>; rel="modulepreload"; nopush, </npm/vega-statistics@1.9.0/+esm>; rel="modulepreload"; nopush, </npm/vega-time@2.1.2/+esm>; rel="modulepreload"; nopush, </npm/vega-loader@4.5.2/+esm>; rel="modulepreload"; nopush, </npm/vega-scenegraph@4.13.0/+esm>; rel="modulepreload"; nopush, </npm/vega-scale@7.4.1/+esm>; rel="modulepreload"; nopush, </npm/vega-projection@1.6.1/+esm>; rel="modulepreload"; nopush, </npm/vega-view@5.13.0/+esm>; rel="modulepreload"; nopush, </npm/vega-format@1.1.2/+esm>; rel="modulepreload"; nopush, </npm/vega-functions@5.15.0/+esm>; rel="modulepreload"; nopush, </npm/vega-parser@6.4.0/+esm>; rel="modulepreload"; nopush, </npm/vega-runtime@6.2.0/+esm>; rel="modulepreload"; nopush

Safari错误地将这些相对路径解析为当前站点的路径，而非CDN路径，导致404。尝试过importmap重定向无效，且不愿硬编码所有依赖版本；考虑过Service Worker修复，但认为是临时方案。目前模块可正常加载，仅控制台错误提示困扰。

可行解决方案 #

1. 更换Vega的ESM导入路径 #

改用Vega官方提供的完整ESM bundle，该路径不会附带modulepreload的Link头：

import vega from 'https://cdn.jsdelivr.net/npm/vega@5.30.0/build/vega.esm.js';

这种方式加载的是单个聚合后的ESM文件，浏览器无需处理预加载依赖，直接消除路径解析问题。

2. 通过Service Worker拦截并修正请求路径 #

在Service Worker中拦截错误的预加载请求，自动修正为CDN完整路径，无需硬编码版本：

self.addEventListener('fetch', (event) => {
  const requestUrl = new URL(event.request.url);
  // 匹配被错误解析的modulepreload路径
  if (requestUrl.pathname.startsWith('/npm/')) {
    const correctedUrl = new URL(`https://cdn.jsdelivr.net${requestUrl.pathname}`);
    event.respondWith(fetch(correctedUrl, event.request));
  }
});

该方案能有效消除控制台错误，且不影响现有代码结构，属于针对性的临时修复，适合不想修改导入路径的场景。

3. 禁用浏览器modulepreload预加载（不推荐） #

通过meta标签禁用全局modulepreload预加载，但会影响所有模块的加载性能，仅作为最后备选：

<meta http-equiv="Link" content="">

内容的提问来源于stack exchange，提问作者Jeff E Mandel