添加至svelte:head的生产环境脚本重复加载，如何避免？

以下是几种可行的解决方案，按需选择：

方案一：动态创建脚本（最可靠，避免重复） #

在根布局的客户端生命周期钩子中检查环境，且仅在脚本不存在时创建并插入，确保只加载一次：

<script>
  import { onMount } from 'svelte';
  import { environment } from '$lib/env'; // 替换为你实际的环境变量引入路径

  onMount(() => {
    // 非生产环境直接返回
    if (environment !== "PRODUCTION") return;

    // 检查是否已存在目标脚本
    const existingScript = document.querySelector('script[data-domain="mydomain.com"]');
    if (existingScript) return;

    // 创建并插入脚本
    const script = document.createElement('script');
    script.defer = true;
    script.dataset.domain = "mydomain.com";
    script.src = "https://plausible.io/js/script.js";
    document.head.appendChild(script);
  });
</script>

<slot />

方案二：利用app.html结合环境变量（简洁高效） #

如果不需要在组件内做复杂逻辑，直接在根模板app.html中通过环境变量条件注入脚本，确保仅在生产环境构建时添加：

1. 首先在vite.config.js中配置环境变量传递：

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
};

export default config;

2. 然后修改app.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 其他头部内容 -->
  <% if (process.env.NODE_ENV === 'production') { %>
    <script defer data-domain="mydomain.com" src="https://plausible.io/js/script.js"></script>
  <% } %>
</head>
<body>
  <div id="app">%sveltekit.body%</div>
</body>
</html>

方案三：手动初始化Plausible（避免重复统计） #

如果坚持用<svelte:head>加载脚本，可改用轻量版脚本并手动初始化，确保即使脚本意外重复加载，也不会重复统计事件：

<svelte:head>
  {#if environment === "PRODUCTION"}
    <script defer src="https://plausible.io/js/plausible.js"></script>
  {/if}
</svelte:head>

<script>
  import { onMount } from 'svelte';
  import { environment } from '$lib/env';

  onMount(() => {
    if (environment !== "PRODUCTION") return;

    // 仅在未初始化时执行
    if (window.plausible) return;
    window.plausible = function() { (window.plausible.q = window.plausible.q || []).push(arguments) };
    
    // 手动触发页面浏览事件
    plausible('pageview');
  });
</script>

<slot />

内容的提问来源于stack exchange，提问作者Kevin Renskers