Skip to content

Latest commit

 

History

History

ext-manifest

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

简介

演示将清单存储在免费 CDN 上,减少当前站点流量消耗。

预备

进入本案例 www 目录,创建前端脚本,生成清单:

freecdn js --make
freecdn find --save

为避免首次方式时不少资源仍从当前站点加载,本案例使用透明接入模式。

修改 nginx 配置,将 root 设置成 ../../ext-manifest/www,重启服务。访问页面:http://127.0.0.1:12345

该站点有 1000 多个 emoji 图片,都能通过免费 CDN 加速。

由于文件数量较多,导致当前站点下的清单文件有几百 kB(压缩后几十 kB)。虽然不算大,但仍不完美。我们的终极目标是所有较大的静态资源都能从免费 CDN 加载,自己的站点只需提供几个极小的文件。

开始

外部清单

这一次,我们使用自定义的清单文件名:

freecdn find --save manifest-full.txt

参考上一个案例,将 manifest-full.txt 上传到免费 CDN 并导入数据库:

export NPM_PKG="free-host"
../../free-host/npm-upload.sh manifest-full.txt

本站清单

当前站点的清单只需记录一个文件,即 manifest-full.txt 的 URL 和 Hash:

freecdn find --filter manifest-full.txt --save

创建引用外部清单的配置文件 custom.conf

@include
	/manifest-full.txt

合并该配置到当前站点清单:

freecdn manifest --merge ../custom.conf

当前站点的清单最终很简短:

/manifest-full.txt
	https://unpkg.com/[email protected]/index.js
	https://cdn.jsdelivr.net/npm/[email protected]/index.js
	hash=y3OXpimfTQJZ7CcFtPya+i2I3sCYnm9EIBlrqBCXcm0=

@include
	/manifest-full.txt

效果预览

新建隐身窗口,再次访问:http://127.0.0.1:12345

现在,完整清单也能从免费 CDN 加载了。当前站点只需提供一个几百字节的入口清单,体积减少近千倍。

挑战极限

我们来挑战下,当前站点最少只需消耗多少流量,就能让用户浏览所有内容。

  • 将站点下的 JS、HTML 等私有文件上传到免费 CDN(使用 freecdn find --show-unmatched 可列出无法搜到的文件,避免上传公共文件)

  • 生成完整清单,上传到免费 CDN(该清单包含了 1000 多个公共文件和几个私有文件)

  • 本站清单引用完整清单

export NPM_PKG="free-host"
../../free-host/npm-upload.sh $(freecdn find --show-unmatched)

freecdn find --save manifest-full.txt
../../free-host/npm-upload.sh manifest-full.txt

freecdn find --filter manifest-full.txt --save
freecdn manifest --merge ../custom.conf

测试没问题后清空 nginx 日志(examples/nginx/nginx/logs/access.log),新建隐身窗口再次访问。

查看日志,只有 3 个请求:

  • /(透明接入模式的安装页,压缩后 ~100 字节)

  • /freecdn-loader.min.js(loader-js,压缩后 ~500 字节)

  • /freecdn-manifest.txt(本站清单,压缩后 ~200 字节)

尽管页面引用了 1000 多个相对路径的资源,总共数 MB,但我们的站点只需提供 3 个极小的文件,总共不到 1kB!

结尾

掌握本文案例后,你可以将网站流量成本压榨到极致。每个用户只需消耗当前站点极少流量就能浏览所有内容,无论内容有多少。