免费 CDN 上传大文件

[iqoo]

由于很多免费 CDN 对单个文件的体积有限制，因此无法上传大文件。

不过有个黑科技可以突破这个限制：把大文件切割成多个小文件上传，运行时通过 Service Worker 进行合并，这样在页面看来仍是一个大文件。

这里使用 NPM 空间演示。将测试文件 bbb.mp4 以每片 10MiB 切割：

mkdir -p bbb.mp4.parts
split -b 10MiB -d bbb.mp4 bbb.mp4.parts/

得到 00 、01 、02 、...、33 切片，然后逐个上传到 NPM：

• npm.elemecdn.com/[email protected]/main.bin

• npm.elemecdn.com/[email protected]/main.bin

...

• npm.elemecdn.com/[email protected]/main.bin

最终效果：freecdn.etherdream.com/bbb.mp4

该文件实际并不存在，而是通过 Service Worker 虚拟出来的。如果用低版本浏览器访问就是 404 。

拖动视频进度条，程序会根据 Range 请求范围，加载相应的分片。

（打开控制台调试时不要勾选“禁用缓存”，否则请求可能不走 ServiceWorker ）

事实上 NPM 有多个服务，例如 unpkg.com 和 npm.elemecdn.com 。因此当一个 CDN 速度慢时，Service Worker 可自动选择另一个，从而增加稳定性。

更多细节可查看：github.com/EtherDream/freecdn/tree/master/examples/file-split

[xinyana]

虽然这羊毛薅的有点过分，不过有点意思

[learningman]

挺恶心的，和之前那个拿 npm 分发 jar 包的一丘之貉

[ch2]

ios Safari 下水道了，不支持

[eason1874]

如果是视频切片的话，可以不用在服务端合并，切片后生成一个 m3u8 列表，网页前端播放器会根据播放进度从 m3u8 列表请求不同的文件，这样兼容 100%

[cslive]

记得之前有个用哔哩哔哩 cdn 这么搞的

[mxT52CRuqR6o5]

@learningman 有啥的啊，我们可最喜欢玩囚徒困境游戏了

[yangg]

你怎么上传到 npm 的？发个版本？

[yaott2020]

拼命薅羊毛的最后都无羊毛可薅

[iqoo]

@eason1874 视频是可以的，不过这个支持任意格式的文件。（不知 m3u8 是否兼容所有浏览器，之后细节研究下）

[iqoo]

@yangg 每个切片对应一个包版本号，后面那个文档里有 shell 实现，这样比较简单而已。

当然这里出于简单而已，实际不推荐放 github 和 npm ，这两个空间可以放任意格式的文件，比较珍贵，白嫖可惜了。

实际最好的方案是放图床，知乎、B 站、简书这些。每个切片加个图片头，使用时跳过头长度就可以。

[ragnaroks]

在我上学那会黄网都是这样用正常网站的静态存储放黄片

[byte10]

把大文件切割成多个小文件上传，运行时通过 Service Worker 进行合并，这样在页面看来仍是一个大文件。 我不太明白这个原理，下载文件的时候是在客户端浏览器进行合并 多个 part 吗

[yin1999]

Service worker 是能够拦截网页的请求的，拦截请求以后，由 service worker 而非服务器直接响应请求

[Yumine]

npm.elemecdn.com 已经设置了访问权限

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>You have no right to access this object because of bucket acl.</Message>
<RequestId>62CF6CDE97E87C373698B17D</RequestId>
<HostId>fe-static-zbprod-zb1-oss-3.oss-cn-zhangjiakou.aliyuncs.com</HostId>
</Error>

[iqoo]

@Yumine 这就是多节点冗余的好处，免费 CDN 随时可能关闭，同时准备多个节点稳定性就大幅提高了。