Bubbly中多余项目工程的删除方法详细步骤教程

确认是否存在多余bubbly实例

先不要急于操作，使用浏览器开发者工具进行确认。按F12打开控制台（Console），输入以下代码并回车： document.querySelectorAll('canvas[data-bubbly]') 如果返回的NodeList长度大于1（例如 `[canvas, canvas]`），则说明页面中存在多个bubbly生成的canvas元素——这些就是需要清理的多余实例。

在HTML页面中彻底删除bubbly实例

**方法一：直接移除canvas元素**（适用于CDN引入且未封装的情况） 在需要清理的位置执行以下代码： document.querySelectorAll('canvas[data-bubbly]').forEach(c => c.remove()); 该代码会将所有bubbly生成的canvas从DOM中移除，动画立即停止，不留痕迹。 **方法二：调用bubbly提供的销毁API（推荐，更彻底）** 如果使用的是v1.0.0及以上版本，bubbly()调用后会返回一个控制对象： const bubblyInstance = bubbly(); 需要停用时执行： bubblyInstance.destroy(); 注意：必须保存该实例引用，否则无法调用destroy。若未保存引用，则只能使用方法一。

在现代前端工程（Vite/React/Vue）中解除bubbly注册

第一步：检查入口文件（如 `main.js` 或 `main.ts`）中是否存在 `import 'bubbly-bg';` 语句。如有则直接删除——ESM导入会自动注册全局bubbly函数，删除即可切断源头。 第二步：在整个项目中搜索 `bubbly(` 或 `import bubbly from` 的调用位置，逐个注释或删除。特别注意 `useEffect` / `mounted` 钩子中启动bubbly的地方——这些最易被遗漏，组件反复初始化会生成新实例。 第三步：运行构建命令前执行 `npm run build`，然后检查 `dist` 目录输出的JS文件中是否仍包含 `bubbly` 字符串。若仍有，说明代码中仍存在引用，需继续排查。Webpack/Rollup不会打包未引用的模块，残留字符串意味着代码未清理干净。

防止重复加载

在 `` 底部仅保留**一次** bubbly 调用，并确保它不在循环、条件渲染块或事件回调中重复执行。以下是一个反面示例： button.addEventListener('click', () => bubbly()); // 每次点击都会新增一个canvas 这种写法必须避免。正确做法是：页面初次加载时调用一次，需要切换效果时通过更新参数实现，而非重复调用函数。