由于很多免费 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/free-host@0.0.0-bbb-00/main.bin
npm.elemecdn.com/free-host@0.0.0-bbb-01/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
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.