IPFSCDN.js：在浏览器中编织去中心化的内容分发网络

引言：当 CDN 遇见 Web3

在互联网的浩瀚星海中，内容分发网络（CDN）如同一座座灯塔，将数据的光芒传递到世界的每一个角落。然而，传统的 CDN 架构依赖于中心化的服务器集群，它们虽强大，却也脆弱——单点故障、带宽成本、地域限制，如同无形的枷锁，束缚着信息的自由流动。

今天，我想向你介绍一个优雅而前卫的解决方案：IPFSCDN.js。这是一个纯浏览器端的 JavaScript 库，它将 IPFS（星际文件系统）的去中心化魔力注入网页，让每一张图片都能在 P2P 的网络中自由穿梭，让每一位访问者都成为内容分发的参与者。

---

一、原理：在浏览器中孕育的 IPFS 节点

1.1 核心技术栈

IPFSCDN.js 的魔法建立在 Helia 之上——这是 IPFS 官方推出的新一代 JavaScript 实现。与传统的 js-ipfs 相比，Helia 更轻量、更模块化、更适合现代浏览器环境。

import { createHelia } from 'https://cdn.jsdelivr.net/npm/helia@6.0.20/+esm';
import { unixfs } from 'https://cdn.jsdelivr.net/npm/@helia/unixfs@7.0.4/+esm';

这两行代码，如同打开了一扇通往去中心化世界的大门。Helia 在浏览器中创建了一个完整的 IPFS 节点，它通过 WebRTC 与其他节点建立 P2P 连接，通过 WebSocket 连接到 IPFS 网络，甚至支持 WebTransport 协议以获得更优的性能。

1.2 工作流程：从拦截到分发的完整闭环

当 IPFSCDN.js 被引入页面，一场精密的舞蹈便悄然展开：

第一步：初始化 页面加载的瞬间，Helia 节点在浏览器中苏醒。它生成唯一的 Peer ID，如同一个数字化的指纹，标识着这个节点在 IPFS 网络中的身份。

第二步：拦截 脚本扫描页面上所有的 标签，如同一位细心的图书管理员，逐一记录每一张图片的 URL。无论是绝对路径还是相对路径，都被转换为标准化的绝对 URL。

第三步：缓存查询 对于每一张图片，系统首先查询本地 IPFS 节点："这张图片，我是否曾经见过？" 通过 URL → CID 的映射缓存，答案往往能在毫秒之间获得。

第四步：存储与获取

• 若图片未曾谋面：从原始 URL 获取图片数据，存入本地 IPFS 节点，获得唯一的 CID（Content Identifier），并向网络宣告这一内容的存在。
• 若图片已在本地：直接从 IPFS 节点读取数据，生成 Blob URL，替换原始的 src 属性。

1.3 CID：内容的永恒指纹

在 IPFS 的世界中，CID（Content Identifier）是内容的灵魂。无论是一张图片、一段视频，还是一篇文字，只要内容相同，CID 便永远相同。这种基于内容的寻址方式，彻底颠覆了传统 URL 的脆弱性——即使原始服务器消失，只要网络中还有节点保存着这份内容，它便永远不会丢失。

IPFSCDN.js 会在处理后的图片上标记三个重要的数据属性：

• data-ipfs-cid：图片的 CID
• data-ipfs-original-url：原始绝对 URL
• data-ipfs-source：local 或 remote，标识数据来源

二、使用方式：零配置的优雅体验

2.1 一行代码的魔法

IPFSCDN.js 的设计哲学是"约定优于配置"。你无需理解复杂的 IPFS 概念，无需配置繁琐的参数，只需在页面底部添加一行代码：

<script type="module" src="./ipfscdn.js"></script>

仅此而已。脚本会自动完成初始化、扫描、处理、监控的全部流程。这是一种近乎禅意的简洁——在技术的复杂性之上，为用户提供最纯粹的易用性。

2.2 手动控制：当需要更多自由

对于追求掌控感的开发者，IPFSCDN.js 也提供了完整的 API：

import ipfscdn from './ipfscdn.js';

// 将实例挂载到全局，方便调试
window.ipfscdn = ipfscdn;

// 手动启动
await ipfscdn.start();

// 处理特定图片
const img = document.querySelector('#myImage');
await ipfscdn.processImage(img);

// 查看节点信息
console.log('Peer ID:', ipfscdn.helia.libp2p.peerId.toString());
console.log('缓存映射:', ipfscdn.imageCache);

这种灵活性，让 IPFSCDN.js 既能满足快速集成的需求，也能适应复杂的定制化场景。

2.3 安装方式

方式一：直接使用 将 ipfscdn.js 文件放置于你的站点目录，通过