如何限制recaptcha__en.js脚本仅加载一次以减轻页面负载？

嘿，这个重复加载recaptcha__en.js的问题确实挺影响页面性能的，我来分享几个实用的解决思路，帮你把脚本限制为仅加载一次：

1. 排查代码中的重复调用 #

首先要检查你的页面代码，看看是不是多次引入了reCAPTCHA的脚本标签，或者动态加载脚本的逻辑被执行了多次：

• 检查HTML里有没有重复的<script src="https://www.google.com/recaptcha/api.js"></script>标签；
• 如果是动态渲染表单（比如单页应用、动态组件），确认表单组件是不是被重复渲染，每次渲染都触发了脚本加载。
  找到多余的调用后，删掉重复部分即可。

2. 给脚本加载加个"守卫" #

如果是动态加载的场景，没法直接避免重复触发加载逻辑，可以写一个简单的判断函数，确保脚本只被加载一次：

function loadReCaptchaOnce() {
  // 检查页面中是否已存在reCAPTCHA脚本
  const existingScript = document.querySelector('script[src*="recaptcha/api.js"]');
  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://www.google.com/recaptcha/api.js';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
  }
}

// 仅在需要初始化reCAPTCHA时调用这个函数
loadReCaptchaOnce();

这个函数会先检查页面中是否已经加载过目标脚本，只有在未加载的情况下才会创建并插入脚本标签，从根源避免重复加载。

3. 检查第三方插件/主题的自动注入 #

如果你用的是CMS系统（比如WordPress、Shopify）或者第三方表单插件，很可能是插件/主题自动重复注入了reCAPTCHA脚本：

• 查看插件的设置面板，有没有选项可以控制reCAPTCHA脚本的加载时机，或者禁用自动加载；
• 以WordPress为例，可以用wp_dequeue_script钩子取消多余的脚本注册，只保留一次合法的加载。

4. 确认reCAPTCHA初始化逻辑 #

有时候即使脚本只加载一次，重复的初始化调用也可能被误认为是脚本重复加载（不过你明确看到了四次脚本请求，所以这条是补充检查）：

• 确保整个页面只执行一次reCAPTCHA的初始化逻辑，比如v2的grecaptcha.render()或者v3的grecaptcha.execute()，不要在多个组件或事件中重复调用。

验证修改效果 #

改完之后，打开浏览器开发者工具（按F12）切换到Network标签，刷新页面，筛选JS类型，查看recaptcha__en.js的请求次数，确认是否只加载了一次。如果还有问题，可以通过调用栈追踪是哪段代码触发了重复加载。

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