如何在按钮点击后才加载Web Component反馈弹窗资源？

1. 先做用户抽样，仅给目标用户渲染触发按钮 #

首先在页面初始化阶段，只对5%-10%的抽样用户渲染反馈按钮，其他用户完全不加载任何相关代码：

// 基于用户标识（比如用户ID、会话ID）做稳定抽样，避免刷新后状态变化
const userId = getCurrentUserId(); // 替换成你的用户ID获取逻辑
const sampleRate = 0.05 + Math.random() * 0.05; // 5%-10%随机抽样率
const isInSample = (userId % 100) < (sampleRate * 100);

if (isInSample) {
  // 动态创建反馈按钮
  const feedbackBtn = document.createElement('button');
  feedbackBtn.id = 'feedback-trigger';
  feedbackBtn.textContent = '提交反馈';
  document.body.appendChild(feedbackBtn);
  
  // 绑定点击加载逻辑
  feedbackBtn.addEventListener('click', loadFeedbackComponent);
}

2. 点击按钮时才动态加载Web Component资源 #

只有当抽样用户点击按钮时，才发起Web Component包的请求，完全避免非点击用户加载资源：

方案A：ES模块格式的Web Component

如果你的Web Component是用ES模块打包的，直接用动态import()：

let componentLoaded = false; // 避免重复加载

async function loadFeedbackComponent() {
  if (componentLoaded) {
    // 组件已加载，直接显示弹窗
    document.querySelector('feedback-modal').show();
    return;
  }
  
  try {
    // 动态加载组件模块
    await import('./path-to-your-feedback-component.js');
    componentLoaded = true;
    
    // 创建组件实例并显示
    const modal = document.createElement('feedback-modal');
    document.body.appendChild(modal);
    modal.show();
  } catch (err) {
    console.error('加载反馈组件失败:', err);
    alert('反馈功能暂时不可用，请稍后再试');
  }
}

方案B：传统脚本格式的Web Component

如果是UMD或者IIFE格式的脚本，动态创建<script>标签加载：

let componentLoaded = false;
let scriptLoading = false;

function loadFeedbackComponent() {
  if (componentLoaded) {
    document.querySelector('feedback-modal').show();
    return;
  }
  if (scriptLoading) return;
  
  scriptLoading = true;
  const script = document.createElement('script');
  script.src = './path-to-your-feedback-component.js';
  script.onload = () => {
    componentLoaded = true;
    scriptLoading = false;
    const modal = document.createElement('feedback-modal');
    document.body.appendChild(modal);
    modal.show();
  };
  script.onerror = () => {
    scriptLoading = false;
    alert('反馈功能暂时不可用，请稍后再试');
  };
  document.head.appendChild(script);
}

额外优化点 #

• 加载状态提示：点击按钮后可以显示加载动画，避免用户以为没反应
• 缓存策略：给Web Component资源设置合适的HTTP缓存头，让用户后续访问无需重复下载
• 抽样稳定性：尽量基于用户唯一标识（如用户ID）计算抽样，而不是纯随机，避免用户刷新后按钮消失/出现

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