排错：Svelte应用的 中出现重复元素

症状

打开 Svelte 应用的 html 源码，有多个重复元素（内容完全重复）存在，比如<script>和 <style>。

原因

这种情况十有八九是因为在一个非全局的 svelte 组件中使用了 <svelte:heade>，并且这里有一个尚未关闭的 bug。

解决

了解原因之后，处理方式自然也就出来了。通常有两个选择：

• 方法 1：将 <svelte:heade> 部分内容挪到全局组件中，比如 App.svelte。
• 方法 2：在组件的 onDestroy 方法中手工移出相关元素。

使用方法 1 时请注意

有些外部脚本可能在加载时有初始化的回调函数。比如 Google Map API，其 url 形式如下：

<script
  src="https://maps.googleapis.com/maps/api/js?key={GOOGLEMAP_KEY}&libraries=places&callback=initMap&solution_channel=..."
  async
  defer
></script>

其中，callback 指定的就是页面自定义的回调函数，在 js 加载成功之后执行。

针对于此，若采用方法 1，则可以（简单粗暴地）：

1. 在全局组件或外部首页（比如 routify 的 __app.html）

   <script src="https://maps.googleapis.com/maps/api/js?key={GOOGLEMAP_KEY}&libraries=places&solution_channel=..."></script>
   

   注意：去掉了延迟加载和 callback 参数。

2. 在对应组件的 onMount 中调用 initMap 函数，由于此时 js 已经加载，再调用初始化函数自然可以。

当然，实际情况复杂多变，这里也只能提供解决问题的方法和思路。归根结底，只有知道了原因，办法也就呼之欲出了。

火焰兔

海报 链接