小编Dol*_*lly的帖子

在 web.dev 上有一篇非常有趣的文章，关于 module worker 的https://web.dev/module-workers/我们有能力将 worker 作为预加载模块加载，这意味着它们可以被预加载，甚至可以预解析和预取他们的依赖项（https://web.dev/module-workers/#preload-workers-with-modulepreload）。

如果我是对的，不仅 Web-Workers 可以作为预加载模块加载，这适用于任何 js 脚本、字体、css 等。

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

这篇文章里有一句话，让我很困扰：

主线程和模块工作线程也可以使用预加载的模块。这对于在两种上下文中都导入的模块很有用，或者在无法提前知道模块将在主线程或工作线程中使用的情况下很有用。

这是否意味着模块加载也会缓存解析后的代码，这意味着在主线程和工作线程中使用的模块将不会被再次解析，如果我们在顶部使用 import 语句包含它？

然而，这不会发生，每当我们在任何领域（主线程、工作线程）上导入模块时，它们都会独立执行导入，然后将来它们会在自己的领域中引用解析缓存的实例。

我真的很困惑，作者到底想解释什么。以及我们如何实施它。

相关文章：https : //developers.google.com/web/updates/2017/12/modulepreload#does_preloading_modules_help_performance

我的任务是更改 Mapbox 中图标图像的图标颜色。mapbox 允许这样做的唯一方法是使用 sdf-icons( https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color )。

通过一小时的搜索，我找不到实现这一目标的最简单方法。我发现有一个 npm 模块是https://www.npmjs.com/package/image-sdf但是在 png 上使用它的命令将其转换为 sdf 然后在地图上渲染后并没有给我最好的结果。

我正在使用的命令

image-sdf cycle-initial.png --spread 5 --downscale 1 --color black > cycle.png

cycle-initial.png(INPUT) 如下：

cycle.png(OUTPUT) 如下：

但是在使用 cycle.png 作为 Image src 时并没有给出最好的结果。

代码片段：

const img = new Image();
img.addEventListener('load', () => {
            this.mapInstance.addImage('circle-icon', img, { sdf: true });
        }, false);
img.src = cycle;

我请求是否有人，如果我在这里做错了什么，请帮助我，或者是否有任何正确的方法来创建 sdf-icon 以正确呈现。